scroll animation, Text animmation

[Arun_ms]

hey guys, 
im trying to recreate this text moving effect from https://clingr.me/ (on third section), there is also a fixed background image scaling  effect , i thing im almost done, but its is not smooth at all everything happens so quick, i tried to increasing  the end value but not working? 

 

See the Pen eYqREqr?editors=0100 by Rare4pple (@Rare4pple) on CodePen.

[Arun_ms]

i thing the problem is within the html, like the ".wrapperSix2" div is just an empty div, and this is the div used  as  trigger: ".wrapperSix2", the reason why i added a separate div for trigger is that, the position fixed is not working with other div. if i have another elements inside this .wrapperSix div, cant scroll....any idea?

[Arun_ms]

is there any problem when, using position: fixed.  inside a wrapper "div" which is having  "pin" in gsap? why its causing issues? 

[mvaneijgen]

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  
  
Most of the ScrollTrigger effects you see are just moving things on the y-axis instead of scrolling them, then hooking that animation to ScrollTrigger will give the illusion of scrolling, but they are really just animating! Getting to grips with this knowledge will make it so much easier to create all kinds of effects, I've written a whole post about it, check it out:

 

I've restructured your HTML to more reflect what above topic describes and everything now is stacked right on top of each other (see pen without any JS). I'm note sure what section you've talking about in the site you've linked, but that doesn't really matter for now. I've removed ScrollTrigger for now and installed GSDevTools (a premium plugin you can use for free on places like Codepen) to really focus on the animation you want to happen. I've also removed some of your CSS that was conflicting with the logic (again check the post above this all explains everything). 

 

Then on the timeline we have a few tweens, two that animate the text from left to right then the purple section that gets animated .from() off screen to its initial position and last the background tween that scales .from() scale: 1.4 to the initial scale of 1 (the browsers default) and this last tween uses the position parameter to start at 0 on the timeline eg the start, so this plays the whole duration the other things are animating, because we have 3 tweens all taking 1 second and the last (fourth) tween that takes 3 seconds eg the same as the three tweens combined. 

 

You can check how this works on scroll by enabling the ScrollTrigger logic, as you can see I've set the end to include 10000px, which makes it really slow. If you want to have things last a certain scroll distance you'll have to do some math, check it out: Normally in GSAP things work with durations, but when working with ScrollTrigger these durations get converted to distance. It might be hard to wrap your head around, but maybe this example helps. 

 

Let's say we have four tweens that all take 1 second to animate and the total ScrollTrigger distance is 400px each tween will then take up 100px. If we remove one tween and make the last tween take 2 seconds the first two tweens will take still 100px, but the last tween will get stretched over the remaining 200px.

 

Hope it helps and happy tweening! 

 

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

[mvaneijgen]

5 minutes ago, Arun_ms said:

is there any problem when, using position: fixed.  inside a wrapper "div" which is having  "pin" in gsap? why its causing issues? 

Yes it is best to have ScrollTrigger handle all the pining and don't set things to fixed in your CSS

[Arun_ms]

hey @mvaneijgen, thankyou for the detailed explanation, it took some time to wrap my head around the things you mentioned, i got the idea, and the way to approach animations.  but still im wondering is it possible to use fixed, yes i understand that it may conflict with the logic, however im trying to achieve  result im looking for, and some how its working, here is the demo,  im not sure about the code, is this code ok? and i did some changes in the duration and the end value, the problem is the text is bit fast, even changing the duration value, and the  tl.from(".spacer2","), this is coming to slow, i changed it with "-=1" and other values, still the same 

See the Pen qBeXKMe?editors=0110 by Rare4pple (@Rare4pple) on CodePen.

[Rodrigo]

Hi,

 

You're in scroll land now, so the duration of the GSAP Tween in seconds will have nothing to do here, is all about pixels as @Cassie explains in this video:

 

Hopefully this clear things up

Happy Tweening!