Jump to content
Search Community

TimelineMax: Tweens changes speed when adding longer tweens

tobiasger test
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 using TimelineMax with ScrollMagic. I'm aware that this might be something that this forum can't answer, if it's an issue with ScrollMagic, but something tells me that this question applies to how GSAP works rather than ScrollMagic. Please tell me if I'm wrong.

I have created a timeline that runs when the user scrolls, obviously. I'm adding my tweens like this:

 

var timeline = new TimelineMax()
     	.to("#scene1", 0.5, { z: "200%" }, "scene1")
        .to("#butterfly", 1, { css: { bezier: butterflyFlightpath.entry } }, "scene1+=0.25")
        .add(butterflyTween, "scene1")
        .staggerTo("#scene1 .image", 1, { css: { opacity: 1 } }, 4, "scene2")
        .staggerTo("#scene1 .image", 1, { css: { opacity: 0 } }, 4)


The code for the variable butterflyTween looks like this:
 

var butterflyTween = TweenMax.to(butterflyObj, 0.1, {
        curImg: butterflyImages.length - 1,
        roundProps: "curImg",
        repeat: "100%",
        immediateRender: true,
        ease: Linear.easeNone,
        onUpdate: function () {
            $("#butterfly").attr("src", butterflyImages[butterflyObj.curImg])
        }
    })


This tween is changing the image sequence of the image that is #butterfly, so that it's wings are flapping when being animated using a bezier curve across the screen. The variable butterflyFlightpath looks like this:

 

var butterflyFlightpath = {
        entry: {
            curviness: 1.25,
            autoRotate: true,
            values: [
                { x: 100, y: -20 },
                { x: 300, y: 10 },
                { x: 410, y: 40 },
                { x: 540, y: 20 },
                { x: 570, y: 20 },
                { x: 620, y: 15 },
                { x: 660, y: 20 },
                { x: 800, y: 130 },
                { x: $(window).width() + $("#butterfly").width(), y: -100 },
            ]
        },
    };

 

The problem I'm experiencing is when I add the staggerTo(). As there are a couple of images being staggered by this, their total duration becomes a few seconds. This seams to affect the duration of the butterfly animation. Not the image sequence animation, but the movement animation set by the bezier. It becomes very fast the longer the staggering animation is.

Maybe I'm missing something, but how would I get the duration of each animation to be consistent, regardless of the total duration of the whole timeline changing? Do I have to change the duration attribute with ScrollMagic the more I add, or is there any other way?

Link to comment
Share on other sites

Sorry, I'm not really understanding this. It would be of great help if you could create a reduced test case in CodePen as explained here:

 

Leave out ScrollMagic and any related code entirely. Its important to understand first whether or not GSAP is behaving as it should on its own. 

Thanks!

  • Like 4
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.
×
×
  • Create New...