How to run animation automatically after the first element

[mado1 1 Likes (Newbie)]

Hello,

 

I am trying to figure how to run an animation within a scene that has a duration. In the codepen example the duration is set to:

duration: "100%"

 

That makes it so that the whole scene will be animated when you scroll. 

 

Now for example; I want to to keep the scroll animation for the line (#theLine) but want to play/run the alpha and ease animation of the circle (#theCircle) by itself when we are hitting that element.

 

I want to run the animation of the alpha and ease automatically from #theCircle when that element comes in

lineAnim.fromTo("#theLine", 1, {drawSVG:0}, {drawSVG:"100%", ease:Linear.easeNone});
lineAnim.fromTo("#theCircle", 0.1, {scale:0, autoAlpha:0}, {scale:1, autoAlpha:1, ease:Linear.easeNone}, 0.5);

I have been looking all over the forums and looked into tutorials but I cannot find anything that helps me. Most of the examples are animations when the element is in the viewport. 

 

Greetings,

Mark

See the Pen PvbjdG by monsmado (@monsmado) on CodePen

[Dipscom 2,815 Likes (Superhero)]

Hi mado1,

 

I imagine you are aware but, in the event that you are not, please see the following disclaimer:

 

"ScrollMagic is not a GSAP product, therefore is not officially supported here. However, that does not stop anybody who wants to, to jump in and offer assistance".

 

You are mistaken when you state the following:

 

54 minutes ago, mado1 said:

duration: "100%"

 

That makes it so that the whole scene will be animated when you scroll.

 

When you set ScrollMagic's duration to "100%" it means the scroll distance used by it is the same as the viewport size. In your example's case it will the viewport height. Your tween/timeline that is linked to that scene will have its progress locked to that distance, meaning your tween/animation will have the same duration as the distance (vertically) scrolled - The viewport height.

 

If I understand your requirement correctly, all you need to do to achieve your desired effect is to have a trigger that matches the location of the element you want to animate on a completely separate scene to this initial scene you have created.

[mikel 1,823 Likes (Superhero)]

Hi @mado1,

 

The circle animation reacts when the line is on half window. Does it look like you expect it when the animation of the circle is shorter?

 

See the Pen joVaLw? by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[mado1 1 Likes (Newbie)]

Ok so here is my codepen for what I have been working on:

 

See the Pen YbpYQN by monsmado (@monsmado) on CodePen

 

I have re-created the effect of the original landing page. 

 

In the original page this: 

.to ('.iphone1-img-behind', 3, {x: "-50%", ease:Power4.easeOut})
.to ('.iphone2-img-behind', 3, {x: "50%", ease:Power4.easeOut}, "-=3")

Will run by itself, without scrolling. The animation plays by itself. And I have no idea how to fix that because now it only works when you scroll. But the idea is that they slide by them self when those elements are being triggered.

 

I hope I have clarified myself a bit better now here.

[Dipscom 2,815 Likes (Superhero)]

So, correct me if I am wrong: You want an animation to play independently of the user scrolling when the user as reached a certain point in the scrolling of the page, right?

 

If that's what you are after, it is what I have said: you need a different scene added to the controller. That scene will have its own trigger, no duration and you can choose exactly where in the scroll of the page to set it off.

[mado1 1 Likes (Newbie)]

Ok I think we are getting closer to understand each other now. 

 

So I create a new scene with a new timelinemax then add this in there:

.to ('.iphone1-img-behind', 3, {x: "-50%", ease:Power4.easeOut})
.to ('.iphone2-img-behind', 3, {x: "50%", ease:Power4.easeOut}, "-=3")

then I can trigger it. 

How would I trigger it so that it will be in-sync with rest of the scroll scene? 

 

 

 

 

[Dipscom 2,815 Likes (Superhero)]

You will have to define what you mean by 'in-sync'.

 

To me, it looks like there is a point on your journey that you want this secondary animation to happen. Let's call it 50% of the viewport. If, the element you are animating is already at that spot, use it to trigger the animation.

 

Makes sense?

[mikel 1,823 Likes (Superhero)]

Hi @mado1,,

 

Please look in the docs of ScrollMagic and in the examples: e.g. this

 

1. When no duration is defined for the scene, the tween will simply start playing when the scroll reaches the trigger position.
2. If the scene has a duration the progress of the tween will directly correspond to the scroll position.

 

Just make some simple exercises based on the above example.

 

Best regards

Mikel

[mado1 1 Likes (Newbie)]

Well at the moment that part:

.to ('.iphone1-img-behind', 3, {x: "-50%", ease:Power4.easeOut})
.to ('.iphone2-img-behind', 3, {x: "50%", ease:Power4.easeOut}, "-=3")

comes right after another animation. So I guess I have to pinpoint exactly with let’s say 50% of the viewport. There’s no way I can run or trigger it after this has happened:

.to ('.iphone1', 3, {x: "-54%"})
.to ('.iphone2', 3, {x: "54%"}, "-=3")
.from ('.iphone1-text', 0.3, {autoAlpha: 0}, "-=3")
.from ('.iphone2-text', 0.3, {autoAlpha: 0}, "-=3")
.to ('.iphone1-text', 3, {x: "-30%"}, "-=3")
.to ('.iphone2-text', 3, {x: "30%"}, "-=3")

.set ('.iphone-stick', {display: "block"})

 

[Dipscom 2,815 Likes (Superhero)]

There is, you can always just call a function from inside the timeline.

 

tl
.to ('.iphone1', 3, {x: "-54%"})
.to ('.iphone2', 3, {x: "54%"}, "-=3")
.from ('.iphone1-text', 0.3, {autoAlpha: 0}, "-=3")
.from ('.iphone2-text', 0.3, {autoAlpha: 0}, "-=3")
.to ('.iphone1-text', 3, {x: "-30%"}, "-=3")
.to ('.iphone2-text', 3, {x: "30%"}, "-=3")
.set ('.iphone-stick', {display: "block"})
.call(playTween);

function playTween() {
  Tween.to('.class', 1, {x:100});
}

 

But note you will probably have to use a .fromTo() if you want that tween to replay every time your user is scrolling down and there is not a 'out of the box' way to know if the user is scrolling up after scrolling down.

[mikel 1,823 Likes (Superhero)]

Hi @mado1,

 

Here is a conceptual approach for:

The progress of the 1st timeline will correspond to the scroll position, followed directly by the 2nd timeline
without duration for the scene, so the tween will simply start playing.

 

Option 01: One scene and a call for the second timeline. Cons: no complete scene reverse.

Option 02: Two separate scenes, same triggerElement and triggerHook, but with an offset which is the duration of the 1st scene.

 

See the Pen BeQgYz by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel