ScrollMagic - TweenMax vs Timeline

[Guest kkokoruz]

I'm new to both Greensock and ScrollMagic and I'm running up against a wall.  I'm trying to understand how to tween/animate some aspects of my site ie., transitions between frames but still maintain some of the control by having items react when the user scrolls.  Right now my project only reacts the scroll movement but I'd like to be able to trigger section to tween/animate as it gives a nicer/non choppy display.

 

Any and all feedback/help would be greatly welcomed so that I can resolve this dilemma. 

 

Thank You

See the Pen VzjzbX by kokoruz (@kokoruz) on CodePen.

[PointC]

HI @kkokoruz 

 

Welcome to the GS forum.

 

If I understand your question correctly, you want some of the tweens to play based on user scroll speed, but others should play like a regular animation? If that's the case, I'd recommend breaking your animations up into multiple scenes. As you have it now, the entire animation is one timeline with a duration of 600%. When you set the duration in ScrollMagic like that, the duration of the tweens is ignored. ScrollMagic hijacks that value.

 

I'd take those tweens/timelines that you'd like to play normally and create a separate scene and trigger for them. Leave the duration out of the ScrollMagic scene parameters so they'll play at the actual duration of the tween when they hit the trigger. 

 

Hopefully that's what you meant. Happy tweening and welcome aboard.

[Guest kkokoruz]

I have tried what you are suggesting but maybe because I am so new to this I could not get this to work.  If possible could you share a code pen with div sections that are 100% tall that each section is independent so I could see an example of how the code looks?

[PointC]

I don't have time right now to make anything new for you, but I have a couple pens from other forum questions that may help. Here's one that triggers a splitText on each slide.

 

See the Pen evqNEP by PointC (@PointC) on CodePen.

For what you're doing there, the setPin() method for the scenes could be quite useful. Here's one that sets a pin while a line is drawn based on user scroll speed.

 

See the Pen mmPBRm by PointC (@PointC) on CodePen.

Hopefully those help. Happy tweening.

[Guest kkokoruz]

Awesome.  I'll take a look right now.  I've just started building my own stripped down panel flipper so your timing is perfect.

[Guest kkokoruz]

Do you have any codepens on pinning?  That is a big part of the look.  As the panels get to the top of the page they pin to the top so it doesn't feel like youre scrolling through a long page but rather sections are overlaying each other.

[Guest kkokoruz]

I'm looking at this one now but when you have a moment I'd love to see another example.

 

See the Pen QjRWGM by ihatetomatoes (@ihatetomatoes) on CodePen.

 

Thank You!

[PointC]

I don't have too many pinning examples in my collection, but here's another one from @Ihatetomatoes (Petr Tichy)

 

See the Pen qEGqxw by ihatetomatoes (@ihatetomatoes) on CodePen.

 

Happy tweening.

[Guest kkokoruz]

thank you