Jump to content
Search Community

How to run animation automatically after the first element

mado1 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

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

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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? 

 

 

 

 

Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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"})

 

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

 

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...