Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Umberto

Animation start before of scrolling

Recommended Posts

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 post
Share on other sites

 

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

 

  • Like 2
Link to post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 RwReYyL by akapowl (@akapowl) on CodePen

 

 

 

  • Like 3
Link to post
Share on other sites

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 post
Share on other sites

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

  • Like 2
Link to post
Share on other sites

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 post
Share on other sites

 

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

 

 

 

  • Like 2
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.

×