I’m relatively new and trying to create a page scroll animation. This is my first attempt at something this complex, so please bare with me.
Within my full-width section i have created the scroll animation using flex box instead of grids or quickstack, purely because i dont know how i to achieve it in those ways. The desktop version appears to work but it begins to fall apart at the various breakpoints. I would appreciate some expert analysis on my build of the animation and how i can remedy the different break point versions. Link to the preview version below.
You are very close! Rather than using the entire page as the trigger, instead use the section element as your trigger. This will give you more control. Right now, the animation is based on the full depth of the page so if you add or remove content anywhere on the page, this will affect the timing of the movement. See screenshot below for the element trigger settings.
@Port_of_Folio Thanks for this advice. This worked! However at the smallest breakpoint version the animations seems to fall apart, and not correctly in view during the scroll. Do i have to reposition my rotate-wrapper at this breakpoint you think?
I see. Yes it appears the distance the images travel feels relatively farther when everything is scaled down. I see that you’ve started to repeat more images to account for the extra space. This could be the solution.
There can be a scenario where the interaction itself is turned off on the phone view. There is a toggle switch at the bottom of the interaction panel.
Sometimes I’ll create the section for desktop/tablet and another version just for phones, and then hide one depending on the device.
Yes to this - sometimes it is best to create 2 animations, one dedicated to larger screens and one for mobile - particularly portrait mobile then simply tag which ones you want as you check through the break points
