Animation start before of scrolling

[Umberto]

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

[akapowl]

 

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

 

[ZachSaucier]

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.

[Umberto]

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

[akapowl]

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

 

 

 

[Umberto]

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

[akapowl]

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

[Umberto]

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

[akapowl]

 

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

 

 

 

[Umberto]

OK, i try.

Thanks