Giacomo Franco
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Giacomo Franco
-
-
-
Hi! how is it going?
ContextRecently I've been working on a proyect on which I have to implement FLIP, Timeline and ScrollTrigger... Basically the animation goes this way, a little bit of context:
At first I have a laptop SVG covering the entire screen, when the user scrolls, the SVG goes from the full screen to a child container on it, while the user is scrolling the animation is running ( for this I'm using the scrub property in ScrollTrigger), when the SVG is positioned where it has to be at the end, a SVG phone appears and goes next to the laptop. (In the Codepen that i've just created doesn't appear the phone, it isn't important at the moment)
What's happening?I have 2 problems;
When the page loads for the first time the laptop is positioned where it has to be covering the full screen, the first problem occurs when I scroll just after the end of the scroll, the SVG "Jumps" and when I scroll back the SVG is not positioned to the top of the page as it was before (please open the codepen in fullscreen so you can see the bug better).
The other problem is that I can't make it responsive, when I set the parent toflex-wrap: wrap-reverse;
it breaks and the laptop doesn't fit in the container and overflows the viewport
See the Pen NWomZvx by GiacomoFranco (@GiacomoFranco) on CodePen
Flip and ScrollTrigger scrub is "jumping" when going backwards
in GSAP
Posted
Sure!
There's no errors in my console.
Here's the demo, as you can see when size of the tab changes, the laptop doesn't execute the animation... I need to add the timeline to achieve the effect that I want, thanks for you support btw 🙂
See the Pen NWJWrvL by GiacomoFranco (@GiacomoFranco) on CodePen