I have had a lot of experience using Reveal this year so I decided to use the Gravitate stack on at least one page. Just wanted to see how it was different then the other animation stacks. I tried testing it on some cassette tapes illustrations that would rotate 90° as you start scrolling down the page. It seems to work fine when I am inside of Rapidweaver however when it is viewed in a browser the image is a bit crooked by I would say by about 20°. The position changes if you view it on a smaller screen such as on my laptop.
There is a cassette and album cover below the first cassette which don’t seem to have any problem rotating on the desktop. The only page that looks to be completely broken is portrait mode on the iPad! (below) Here is the project file for this page and if the URL is needed it is also online: Discovering The Ladder from Yes
This all comes down to the values you’re providing for trigger locations. Notice in this video how the start orientation changes based on browser height. This is because the triggers are moving: CleanShot 2022-11-16 at 20.55.13.mp4 - Droplr
This is no bug, but simply how you’ve configured your animation.
What I still can’t figure out is there are two other Gravitate stacks below that first cassette animation which don’t move when I when I adjust the browser height. The blue cassette right below that also moves at 45° but stays in that upright position when I change the window size. Is that due to the trigger locations being set at a lower position on the page? I am trying to figure out why if one is effected by browser height they wouldn’t all three be effected by browser height? I’ve work with Reveal and Reveal Pro a lot but it doesn’t seem to happen with those two animation stacks.
You’ll have to experiment with your triggers and other settings as I mentioned before. This tool is not in any way similar to Reveal or Reveal Pro. It is much more complex and will require more attention to detail.
Okay I’ll try working with some different starting position triggers and if that doesn’t work I guess just play with the other settings. If the other object moves right there probably are not too many other changes I need to do to make the first object be the right angle.
Gravitate does scroll-based positioning of objects. Apple tends to use similar effects on their site. I don’t see them using it at the very top of their pages. I think you’re having issues because any change in where the trigger point is in the view area causes it to change the position of your object (cassette tape). It’s not just scrolling, but window resizing that will affect it. Maybe just use it on the lower ones?
Yeah I noticed that on the iPad Air page! It starts with a fade animation at the very top (similar to what you might set in Reveal.) And then has a ton of rotating iPads as you get about 10% down the page. I am not aware of a page where the animation starts at the top either. It is good to know that, being the first I’ve used Gravitate it gives me in idea what it is and isn’t capable of when I use it on an actual job. Thanks for pointing that out.
That is right, I forgot about the preview trigger marks. I actually added these animations back in the Summer I haven’t watched the video since then. Was just going over my old pages today to iron out the remaining problems.
