Jump to content
Search Community

Simple Animation

renny test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Could you be a little more specific, @renny? We don't really have the resources to provide free "build-to-order" consulting services (please read the forum guidelines), but if you have a GSAP-specific question we'd be happy to answer it. Please make sure your minimal demo only includes the isolated piece you're wrestling with (no need to use the real artwork - plain <div> elements are fine). The simpler and more targeted your demo, the more likely you'll get a helpful answer. Isolating is key to troubleshooting for any developer. 👍

Link to comment
Share on other sites

Hello @renny

 

As @GreenSock mentioned, the more minimal your demo, the more likely you'll get a proper answer, as it can be quite cumbersome to wade through that many of lines of code - and debugging whole projects is not really within the scope of these forums.

 

Here are some notes on your demo:

 

  • First things first - whenever possible you should create your ScrollTriggers in order of their appearance on the page.
  • Secondly; except for some special cases where it might be neccessary, it almost never is a good idea to change the position property of an element, especially if you are using it as a trigger. You can achieve the effect you are going for by pinning your element and setting pinSpacing: false - same goes for your header-video.
  • If you need to have a scrub as high as 2 on the animation ScrollTrigger for the fade out of that title, you will have to make sure you are pinning that title (in the ScrollTrigger you created just for that pinning) long enough, so that it's unpinning won't become noticable (as the fading out 'lags' behind the scroll 2 seconds because of that scrub-value). You can in fact just set the end to a very high value - like 5000 - since it won't really matter as the element won't be visible anymore and because of the pinSpacing false won't have an effect on following elements.

 

Does this look more like what you inteded already?

 

See the Pen d2c7509df85eeee3ff908f9d9ba9b103 by akapowl (@akapowl) on CodePen

  • Like 3
Link to comment
Share on other sites

 

My pen above pretty much (except for the additional pinning and different start/end) does what's happening to the image of the two women in the example you posted above. Maybe you didn't see the correct one, because I first posted a link to the wrong pen.

 

As @GreenSock already mentioned, please note, that these forums are not intended to provide free "build-to-order" solutions (please read the forum guidelines). First and foremost these forums offer support with GSAP specific questions.

 

If you have trouble getting an effect done as you wish (which is not what these forums are there for in the first place), please provide a minimal demo of what you have tried so far and explain in a bit more detail what you want to happen and you will drastically increase your chances of gettig a solid answer. Thanks. 

 

  • Like 4
Link to comment
Share on other sites

4 hours ago, renny said:

i just update code, can you help on fix that issue on last section overlap

 

Sorry, I don't understand what it is you mean by last section overlap, since you don't seem to be doing something with resemblane to the original example you posted - and also what you are doing seems to be working alright by now?

 

One thing I did notice is that you are again creating ScrollTriggers out of order of appearance on your page - the ScrollTriggers on the .left-scroll and .right-scroll will not be positioned correctly as they can not know about the pin-spacing you have on the scrollAnim1-timeline's ScrollTrigger.

 

  • Like 2
Link to comment
Share on other sites

  • Solution
5 hours ago, renny said:

So can you check my code and let me know what wrong on there 

 

I think, I already did.

 

15 hours ago, akapowl said:

One thing I did notice is that you are again creating ScrollTriggers out of order of appearance on your page - the ScrollTriggers on the .left-scroll and .right-scroll will not be positioned correctly as they can not know about the pin-spacing you have on the scrollAnim1-timeline's ScrollTrigger.

 

  • Like 2
Link to comment
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.
×
×
  • Create New...