ScrollTrigger - how to start animations when user scrolls from bottom to top

[mino]

Hello

 

I'm not able to show this problem on the Codepen, because it always scrolling demo to the top after each refresh. 

 

Here is my problem. I'm using ScrollTrigger to run some simple animations. It works perfect, when user is starting scrolling from the top to bottom, but if user scrolls to the end of the website, refresh the browser window and start scrolling to the top then animations are not working at all. Is there a way to add second start trigger when user is scrolling from the bottom to top?

 

 

 

 

See the Pen RwrRawE by mino (@mino) on CodePen

[ZachSaucier]

Hey mino and welcome to the GreenSock forums. 

 

To fix this just change your toggleActions to toggleActions: 'play none play none'  

[mino]

Thank you. It worked! 🚀

[Eric_weya]

On 6/13/2020 at 8:56 PM, ZachSaucier said:

Hey mino and welcome to the GreenSock forums. 

 

To fix this just change your toggleActions to toggleActions: 'play none play none'  

Hello,

 

I got same issue when refresh a page from bottom to top, 

already tried toggleActions: 'play none play none'

but it still not working, i toggle animation by toggleClass and also i need the animation act once

here is my code: 

gsap.from("#vote", {

    scrollTrigger: {

        trigger: "#vote",

        start: "20% 75%",

        toggleClass: "_active",

        toggleActions: 'play none play none',

        once: true

        },

})

gsap.from("#information", {

    scrollTrigger: {

        trigger: "#information",

        start: "20% 75%",

        toggleClass: "_active",

        toggleActions: 'play none play none',

        once: true

    },

})

 

 

[ZachSaucier]

Hey @Eric_weya and welcome to the GreenSock forums. Please create a minimal demo of your issue and create a new thread to ask about your issue:

 

[Eric_weya]

12 hours ago, ZachSaucier said:

Hey @Eric_weya and welcome to the GreenSock forums. Please create a minimal demo of your issue and create a new thread to ask about your issue:

 

Hello, 

I just made a demo on codepen, but still codepen can't start a demo page from bottom or from middle

 

See the Pen zYqrBMW by weya_eric (@weya_eric) on CodePen

 

in this demo, if i start browser this page from bottom or from anywhere but top of this page, scrollTrigger wont add  class "_active" on target

 

Here is another demo : http://demo.weya.tw/gsap-test/ 
Scroll to bottom and refresh page. ".obj" wont shows in both #section-2 and #section-1, 

and if i start page in #section-2  ".obj" wont shows in #section-1. 

[ZachSaucier]

Hey Eric, thanks for the minimal demo! It's super helpful. This is an interesting combination of values for your ScrollTrigger.

 

I won't bore you with the details but ScrollTrigger should behave the way you expect it to in the latest beta. Feel free to use it in your project: https://assets.codepen.io/16327/ScrollTrigger.min.js?v=1112
 

I also simplified your code a bit:

See the Pen oNxbzGN?editors=0010 by GreenSock (@GreenSock) on CodePen

 

By the way, you can view a full page version of any CodePen demo by replacing /pen/ with /debug/ in the URL.

 

Let us know if we can do anything else to help.

[Eric_weya]

 

5 hours ago, ZachSaucier said:

Hey Eric, thanks for the minimal demo! It's super helpful. This is an interesting combination of values for your ScrollTrigger.

 

I won't bore you with the details but ScrollTrigger should behave the way you expect it to in the latest beta. Feel free to use it in your project: https://assets.codepen.io/16327/ScrollTrigger.min.js?v=1112
 

I also simplified your code a bit:

 

 

 

By the way, you can view a full page version of any CodePen demo by replacing /pen/ with /debug/ in the URL.

 

Let us know if we can do anything else to help.

 

 

Thanks, the latest beta worked!

[GreenSock]

Just so you know, it's not "beta" anymore - it was pushed live a short time ago. 3.5.0 🎉