Flip animation between two separate sticky/pinned containers - possible?

[willywonka8000]

Hi everyone,

 

I am working on a concept involving ScrollTrigger and the Flip plugin and I'm wondering if this approach is feasible or if I'm running into a logic conflict.

The Setup: I have two tall sections stacked vertically (e.g., 300vh height each). Inside each section, there is a container that gets pinned (sticky) while scrolling through that section.

 

- Section A (contains Sticky Container A)

-Section B (contains Sticky Container  

The Goal: I want to Flip an element from Sticky Container A into Sticky Container B exactly when the scroll transitions from Section A to Section B.

Any hints or best practices for this "sticky-to-sticky" handover would be appreciated, I'm trying for two days not but I can't get it done. Is it even possible?

I added a codepen, just imagine there are two sections with the hello phrase.

See the Pen xbGQMEK by mald10 (@mald10) on CodePen.

[mvaneijgen]

Hi @willywonka8000 welcome to the forum!

 

Quote

just imagine there are two sections with the hello phrase.

Why do we need to imagine it? I would suggest set up the pen how you imagine it, then we can take a look what isn't working as expected. 

 

Also note that sometimes it is easier to fake things, so if you can just duplicate the item twice and hide the first one  when your done with it and then show the new one, nobody would we the wiser and this would probably be technically easier.

 

Another idea would be to make one big timeline and add all animations to that one timeline. The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  
  
Most of the ScrollTrigger effects you see are just moving things on the y-axis instead of scrolling them, then hooking that animation to ScrollTrigger will give the illusion of scrolling, but they are really just animating! Getting to grips with this knowledge will make it so much easier to create all kinds of effects, I've written a whole post about it, check it out:

https://gsap.com/community/forums/topic/39367-scrolltrigger-stacking-cards-animation-logic-to-create-any-effect-yes-even-yours/

 

If you can update your pen with the layout how you imagine it working, then we can take a look why it isn't. We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools!

 

Hope it helps and happy tweening! 

 

[Rodrigo]

Hi,

 

Perhaps this demo can help:

https://demos.gsap.com/demo/scroll-waypoints/

 

Happy Tweening!

[willywonka8000]

2 hours ago, mvaneijgen said:

Hey @mvaneijgen and @Rodrigo, youre absolutely right. I just made a codepen: 

See the Pen WbxxovN by willywonka8000 (@willywonka8000) on CodePen.

I thought this was going to be simple, but I'm afraid its not possible, because both sections have a sticky div. Would appreciate your help a lot!

 

 

[GreenSock]

Are you just trying to do this?: 

See the Pen vEKKxQj?editors=1010 by GreenSock (@GreenSock) on CodePen.

[willywonka8000]

@Rodrigo Oh, yes, its almost what I'm looking for. In this example, the animation "fires" when the trigger is activated.

What im trying to achieve:
Scrub on .flip, so the animation is tied to the scrolling. No matter what I do, the animation breaks, and the .flip is "jumping" around. Is it possible to add a scrub?

Something like:
trigger: ".container-track2",

start: top bottom,

end: top 30%

[Cassie]

This demo from our demo hub shows how to link a flip animation to scroll.

https://demos.gsap.com/demo/scroll-waypoints

[Rodrigo]

Yeah the problem here is that flipping something to an element that is pinned and keep the Flip target pinned, using scrub as well is a bit more complicated . For that you'll have to use the approach in Jack's demo, but create the Flip animation paused and control it's progress using the onUpdate callback from the ScrollTrigger instance by using the progress of the ScrollTrigger instance. That certainly will require some amount of custom logic and some time for test in order to find the best and most performant way of achieving this.

 

Other alternative could be to try to replicate the approach in this demo:

See the Pen PwYapEQ by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!