Jump to content
Search Community

Why this animation starts from the end?

gsapnooby test
Moderator Tag

Recommended Posts

I see nothing happening in your pen, do you have a bit more info what it is doing and what should happen? Here are some tips that will increase your chance of getting a solid answer:

  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue -  "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 

Also why are you using GSAP version  3.5.1? We're currently on 3.11.4

Link to comment
Share on other sites

@mvaneijgen if you try to scroll down to the end marker and go back up and wait for a bit, It will show the actual starting state. I have added the screenshot in my original post for the reference.

 

Technically the animation should start from that state (as shown in the screenshot) and end when the Div A has expanded to full width. 

 

Further more, there are three Divs A, B, C are there which will appear one by one on further scroll. I implemented  that code but when I scroll, it scrolls and slides to Div C immediately without stopping at Div B.  

 

Also, I just forked one code pen example shared on this forum which has older version of gsap , but I have updated to new one now.

Link to comment
Share on other sites

You're position parameter -=1 is 0.5 seconds before the start of the timeline, default duration of tweens if you don't define it is 0.5 seconds, so if you say that a tween should start -=1 it is put on the timeline -0.5 seconds before the start. A timeline starts at 0, so everything before that is not shown. 

 

You could change the position parameter to 0, "<" or "myLabel" to have the tweens start all at the same time. I encourage you to the read the post, to get a better understanding of how the position parameter works. 

 

See the Pen BaOBmrE?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

  • Like 1
Link to comment
Share on other sites

@mvaneijgen  Can you please help me out with the auto scrolling, why the sequence is getting auto scrolled after Div A1 expands? It should go to the next div on scroll only and next after. I have tried various code from vertical scrolltrigger examples but everything was making sections A1,A2 and A3 auto scroll.    

Link to comment
Share on other sites

You mean you want it to scrub? https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

 

Boolean | Number - Links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following

See the Pen ZEMzjWY?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Link to comment
Share on other sites

I think you might be misunderstanding snap. You can't say snap 'true'

You have to tell GSAP where to snap! From the docs
 

snap Number | Array | Function | Object | "labels" | "labelsDirectional" - Allows you to snap to certain progress values (between 0 and 1) after the user stops scrolling. So snap: 0.1 would snap in increments of 0.1 (10%, 20%, 30%, etc.). snap: [0, 0.1, 0.5, 0.8, 1] would only let it come to rest on one of those specific progress values. It can be any of the following:
  • Number - snap: 0.1 snaps in increments of 0.1 (10%, 20%, 30%, etc.). If you have a certain number of sections, simply do 1 / (sections - 1).
  • Array - snap: [0, 0.1, 0.5, 0.8, 1] snaps to the closest progress value in the Array in the direction of the last scroll (unless you set directional: false).
  • Function - snap: (value) => Math.round(value / 0.2) * 0.2 feeds the natural destination value (based on velocity) into the function and uses whatever is returned as the final progress value (in this case increments of 0.2), so you can run whatever logic you want. These values should always be between 0 and 1 indicating the progress of the animation, so 0.5 would be in the middle.
  • "labels" - snap: "labels" snaps to the closest label in the timeline (animation must be a timeline with labels, of course)
  • "labelsDirectional" - snap: "labelsDirectional" snaps to the closest label in the timeline that's in the direction of the most recent scroll. So if you scroll a little bit toward the next label (and stop), even if the current scroll position is technically closest to the current/last label, it'll snap to the next one in that direction instead. This can make it feel more intuitive for users.
  • Object - Like snap: {snapTo: "labels", duration: 0.3, delay: 0.1, ease: "power1.inOut"}, fully customizable with any of the following properties (only "snapTo" is required):
    • snapTo [Number | Array | Function | "labels"] - determines the snapping logic (described above)
    • delay [Number] - the delay (in seconds) between the last scroll event and the start of the snapping animation. Default is half the scrub amount (or 0.1 if scrub isn't a number)
    • directional [Boolean] - by default (as of version 3.8.0), snapping is directional by default meaning it'll go in the direction the user last scrolled, but you can disable this by setting directional: false.
    • duration [Number | Object] - the duration of the snapping animation (in seconds). duration: 0.3 would always take 0.3 seconds, but you can also define a range as an object like duration: {min: 0.2, max: 3} to clamp it within the provided range, based on the velocity. That way, if the user stops scrolling close to a snapping point, it'd take less time to snap than if the natural stopping point is far from a snapping point.
    • ease [String | Function] - the ease that the snapping animation should use. The default is "power3".
    • inertia [Boolean] - to tell ScrollTrigger not to factor in the inertia, set inertia: false
    • onStart [Function] - a function that should be called when snapping starts
    • onInterrupt [Function] - a function that should be called when snapping gets interrupted (like if the user starts scrolling mid-snap)
    • onComplete [Function] - a function that should be called when snapping completes
  • Like 2
Link to comment
Share on other sites

@Cassie Thank you for the reply. Yes, I understood snap and used in my code as you may check my codepen, you will find them in my commented out code.  

 

There are few things which I have found confusing in gsap. As you have mentioned on my other questions that nested scrollTrigger is a bad practice, if so then how can I used different snap, scrub, pin,start,end logic in different sections of timeline?

 

As you would see, I don't want the scrub on my entire time, only where the slides are moving on Scroll [A1, A2 and A3].  How do I snap with scrub A1, A2 and A3 on scroll based on A's  section without affecting entire timeline. 

 

Link to comment
Share on other sites

It's a bit hard to understand what you're asking. I quickly looked at your demo and I don't follow. I don't even see sections A2 and A3, so I don't know how you want it to snap. Here are some tips that will increase your chance of getting a solid answer:

 

  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue - "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo and scroll down to the grey container" 
  • A minimal demo that only focuses on this ONE challenge (exclude everything you possibly can for the sake of keeping things focused)

 

You asked about having different snap, scrub, pin, start and end logic in different sections of a timeline, but I think you might be over-engineering things a bit. It is logically problematic, for example to have one part of a timeline scrubbed and another part not scrubbed based on scroll position. For example, let's say the first two seconds of your timeline are NOT scrubbed, so the user scrolls and it starts playing but then they scroll really fast to a spot where it's supposed to scrub from seconds 2 through 5. As soon as you hit that, the playhead would JUMP. And what if you set up ScrollTriggers that inadvertently overlap, both trying to control the same timeline? 

 

I mean technically it is possible to get fancy and have one master timeline and then create separate external tweens that control the playhead of that timeline, and each of those tweens can have their own ScrollTrigger of course. But you'll still have the same logic challenges. 

 

Maybe try to set up a super simple CodePen with ONE challenge, like "how can I make the scrubbing horizontal timeline snap to each section?" And then once that's taken care of, move to your next question/challenge. Baby steps. 

Link to comment
Share on other sites

Thank you joining the discussion.  My codepen has those section it just, I was trying various code while waiting for the replies. I think I shouldn't edit the codepen that I have shared with you. 

 

I will share a demo 

See the Pen GRXRpQB?editors=1010 by yumelabs (@yumelabs) on CodePen

for your reference here - along with problems that I am facing.  You dont see A2 and A3 sections because the code wasn't working as I was trying various things while waiting for the responses. 

 

What works

1. On scroll, first animation sequence works which is  make text move to the left out of the viewport and (div B & div C ) move to the right out of the viewport while expanding the middle div which contains sections A1, A2, A3 

 2. When middle div (which contains A1, A2, A3) expands to full width, another scroll triggers the vertical slide of divs A1, A2, A3. 

 

What doesn't work 

1. When the div expand it doesn't stay like that until the next scroll. It scroll to next subsection

2. When div which contains A1,A2, A3 expands while displaying A1, doesnt stay at A1 until the next scroll. It jumps to the last section A3 immediate. This shouldn't happen. They should move A1-- scroll --> A2 --- scroll-->A3 and so on. I know some has suggested to use scrub but I don't want to scrub the entire timeline. Just this part of the timeline.  

3. Also, if you enable snapping, then it creates another problem of auto scrolling to last section A3.  

 

Link to comment
Share on other sites

2 hours ago, newusergsap said:

They should move A1-- scroll --> A2 --- scroll-->A3 and so on. I know some has suggested to use scrub but I don't want to scrub the entire timeline. Just this part of the timeline.  

 

As stated before, you can't do that with ScrollTrigger. You probably can, but then you have to engineer it all your self. As stated by the previous post:

 

3 hours ago, GSAP Helper said:

You asked about having different snap, scrub, pin, start and end logic in different sections of a timeline, but I think you might be over-

engineering things a bit. It is logically problematic, for example to have one part of a timeline scrubbed and another part not scrubbed based on scroll position. For example, let's say the first two seconds of your timeline are NOT scrubbed, so the user scrolls and it starts playing but then they scroll really fast to a spot where it's supposed to scrub from seconds 2 through 5. As soon as you hit that, the playhead would JUMP. And what if you set up ScrollTriggers that inadvertently overlap, both trying to control the same timeline? 

 

 

You can look in to the Observer plugin this will allow you to do certain actions based on user input, but this is separate from ScrollTrigger 

 

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen

 

2 hours ago, newusergsap said:

I think I shouldn't edit the codepen that I have shared with you. 

 

Yes you shouldn't, that makes it really complicated and it is better to post a new pen each time you ask a followup question. Personally I would recommend getting in the habit of forking you pens, I for instance usually have a finished demo around version 20 of a particular pen.

  • Like 3
Link to comment
Share on other sites

Observer plugin is GSAP! It's just a plugin, like ScrollTrigger.

It's definitely not a simple animation if you're jumping between scroll control and event driven scroll though - that's very complex territory to get into as a new user.

Sorry it's been disheartening for you, but it is possible with GSAP, it'll just involve utilising another plugin, and it will take quite a lot of time and effort to figure out.

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...