Jump to content

Guest kkokoruz

ScrollMagic - TweenMax vs Timeline

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.


  • Like 3
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.


  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.