Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Silvia Malavasi

ToggleAction onEnterback resets animation

Go to solution Solved by Cassie,

Recommended Posts

Hello.

I'm new and I'm stuck on this issue.

As you can see in my Codepen, my animation works correctly on all toggleAction triggers but the third one.
When elements EnterBack, the animation resets and elements disappear. 
What I'm doing wrong?

Thank you very much.

 

See the Pen OJpWVzL by silvia-malavasi (@silvia-malavasi) on CodePen

Link to post
Share on other sites

welcome to the forums,

 

thanks for the demo, it's a great start.

 

I added a spacer on top and bottom of the page so that all elements could scroll in and out of the viewport fully.

 

See the Pen VwpPevm?editors=1010 by snorkltv (@snorkltv) on CodePen

 

it appears each section behaves the same way. I don't see the third section acting any differently. your onLeaveBack is set to reset and that appears to be working correctly. the animations resets to a progress(0) where everything has opacity:0 when the start position moves down past scroller-start.

 

Your onEnterBack is set to none, and that appears to be working properly for each section as well.

 

Perhaps I'm misunderstanding the issue. feel free to clarify so that we can help you better.

 

 

 

 

  • Like 5
Link to post
Share on other sites

Sorry, I couldn't explain properly.
All sections behave in the same way and that's correct. With "third one" I wanted to pint at the third toggleAction parameter ie onEnterBack. I don't want elements return to opacity:0 when onEnterBack triggers. I tryed with none, pause or complete but they still reset.

  • Thanks 1
Link to post
Share on other sites

thx, it looks like I wasn't following you perfectly there. however, I think there is some confusion about when onEnterBack happens.

 

I modified your demo to only include one section. I added a little callback that changes the background color of the page when onEnterBack happens.

 

See the Pen XWMpXyd?editors=0010 by snorkltv (@snorkltv) on CodePen

 

Scroll up and down all the way.  You will see that the animation does not reset when onEnterBack fires. It only resets onLeaveBack (4th toggle action) as you have it set that way.

 

        //onEnter, onLeave, onEnterBack, onLeaveBack
        toggleActions: "play pause none reset",

 

My understanding remains: onEnterBack is set to none and is behaving as you have it set up. onLeaveBack is set to reset and this is why your animation resets.

 

Does this make sense? Am I missing something else still?

  • Like 6
Link to post
Share on other sites

Thank you! That's the point! I misunderstood OnEnterBack and onLeaveBack meaning.
Now, if I can, i wold ask you another question. How to reset the animation on backscrolling only when the element is outside of the viewport?
It will simply work with toggleActions:"play reset play reset" if only I didn't have that start: 'top 50%', but I want my animations to start a bit after the elemnts get in viewport.

  • Like 1
Link to post
Share on other sites

glad this helped

 

Quote

How to reset the animation on backscrolling only when the element is outside of the viewport?

 

I'm not sure there is an easy way to do that with your current start and end settings.

 

The trick with this stuff is to really play with things so that you can accommodate the most common use cases with the most pleasing visual result.

reset is very jarring if the user sees it. 

 

I made it so that the animations start when the bottom of the triggers reach the bottom of the viewport. I added reverse for onLeaveBack and I think it works very nicely (if your window is larger then the tiny embed below. go full page)

 

See the Pen rNyjWVW?editors=1000 by snorkltv (@snorkltv) on CodePen

 

Perhaps someone else will have a solution for doing a reset only when the item is fully out of the viewport.

 

 

 

  • Like 3
Link to post
Share on other sites

Maybe we could add something like this to the docs? 

I see a decent bit of confusion around when these events happen *cough* definitely not me, I'm not confused at all

See the Pen qBrRaeX by GreenSock (@GreenSock) on CodePen

  • Like 3
  • Haha 2
Link to post
Share on other sites
19 minutes ago, Carl said:

Perhaps someone else will have a solution for doing a reset only when the item is fully out of the viewport.

 

This issue is in the most common scrollTrigger conundrums! It's been suggested to use two different scrollTriggers. - Maybe this post will help. 
 


I also sometime trigger the animation at the bottom of the viewport but add a small 0.5 or 1s delay. This means the elements fade in a little above the fold but reset when they go below.

  • Like 2
Link to post
Share on other sites

thanks for the tip in the article. looks like 2 scrolltriggers is the way to go.

 

your demo is great and I'm sure it would help.

 

there is already this demo below which covers a lot of ground but as such it's also quite wordy and a lot of stuff happens outside the viewport

 

See the Pen LYVKWGo by GreenSock (@GreenSock) on CodePen

 

I love the simplicity and clarity of your demo, especially since you can see the events fire exactly when the markers intersect on the way up and down.

👍

 

the only change I'd suggest is to space the scroller-start and scroller-end markers so that its SUPER clear that events fire when end passes scroller-end like so

 

See the Pen jOByybw?editors=1010 by snorkltv (@snorkltv) on CodePen

 

  • Like 6
Link to post
Share on other sites

Of course! That would make it a lot clearer.

Link to post
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.

×