Umberto Posted November 8, 2020 Share Posted November 8, 2020 Hi, I have a problem with animations. I tried this example, but when I load the web page the animation has already started and is not waiting for me to get to the exact point. how do i start it when i get to the scrolling point? Sorry for my English See the Pen gOYdyYE by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted November 8, 2020 Share Posted November 8, 2020 Hey @Umberto The animation does exactly what it is supposed to do, since you do not load and use ScrollTrigger in that example at all (which is, what you want, if I understand you correctly). For information on how to use tweens with ScrollTrigger, please see the documentation: https://greensock.com/docs/v3/Plugins/ScrollTrigger 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 9, 2020 Share Posted November 9, 2020 I'm guessing you either linked the wrong pen or failed to click the "fork" button when editing that pen? Regardless it sounds like you're setting something up incorrectly. Double check your syntax and make sure you're loading ScrollTrigger. Link to comment Share on other sites More sharing options...
Umberto Posted November 9, 2020 Author Share Posted November 9, 2020 Hi, to simplify I created a pen. If you load the page and wait 2/3 seconds and then scroll down, you will see that the animation has already started and is not waiting for a viewport. Thanks See the Pen BazqOzJ by umberto (@umberto) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted November 9, 2020 Share Posted November 9, 2020 Hey @Umberto ScrollTriggers in the vars of a tween and/or timeline are supposed to be written with a lowercase 's', like this: gsap.to(".box", { scrollTrigger: ".box", rotation: 360, duration: 3, x: 200 }); You wrote it with a capitalized 'S'. See the Pen ef3c50100e45cfced55e6b1c54e0881e by akapowl (@akapowl) on CodePen 3 Link to comment Share on other sites More sharing options...
Umberto Posted November 10, 2020 Author Share Posted November 10, 2020 Oops, I'm really stupid ..... Now everything works, but using LocomotiveScroll, there are these CSS classes html.has-scroll-smooth { overflow: hidden; } html.has-scroll-dragging { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .has-scroll-smooth body { overflow: hidden; } that do not start the animation. Do I need to add some strings? Thanks Link to comment Share on other sites More sharing options...
akapowl Posted November 10, 2020 Share Posted November 10, 2020 Hey Umberto. Could you please create a minimal demo once more - especially in combination with smooth-scrolling libraries, there can be several things causing issues and it's tough to guess blindly. Cheers, Paul 2 Link to comment Share on other sites More sharing options...
Umberto Posted November 11, 2020 Author Share Posted November 11, 2020 I apologize. Here is the example. See the Pen BazqOzJ by umberto (@umberto) on CodePen Also if you try to resize the page, the animations start. Really strange Thanks for your help Ps: With the measure of the codepen screen, it works. To see the error, enlarge the page and reload and then resize Link to comment Share on other sites More sharing options...
akapowl Posted November 11, 2020 Share Posted November 11, 2020 The reason this combination is not working in your example, is because locomotive-scroll uses a whole different approach to moving the content/window up and down, than the native scroll-behaviour of browsers, thus, ScrollTrigger does not get any helpful information on what to do when, when using a smooth-scrolling library like locomotive-scroll. Since v3.4.0 for these cases there is the very helpful scrollerProxy() though, that helps solving that issue for you. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy That page linked to above has an example on how to hook up locomotive-scroll and ScrollTrigger: See the Pen 1dc38ca14811bc76e25c4b8c686b653d by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Umberto Posted November 11, 2020 Author Share Posted November 11, 2020 OK, i try. Thanks Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now