Text Animation

[Vineeth Achari]

I would like to make a similar text animation using GreenSock. Can you please suggest how I could achieve that?

https://motionarray.com/after-effects-templates/logo-super-stompy-770993/

 

Also, if I remove the height 4000px from #smooth-content. I'm not getting the actual height of the web page.

 

If I keep 4000px, how can I remove this extra space after the footer.

 

[elegantseagulls]

Hi @Vineeth Achari,

 

You shouldn't need to manually add a height in to #smooth-content. If you have a pin: true ScrollTrigger animation with an end: '+=4000' that should automatically add that height you're looking for without overlapping or creating any weird gaps at the bottom.

[akapowl]

 

Judging from the screnshots, I think there might be more of a misunderstanding with regard to the height: 4000px set on the #smooth-content in CSS - which @Vineeth Achari probably just got and kept from the ScrollSmoother demo in the docs (?).

 

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

 

 

 

It looks like technically you do not need to specifically set a height on the #smooth-content via CSS as long as you do have content determining the scroll-height inside that container. In the demo above it is neccessary to set some height though, because the contents are all (or at least mostly) position absolute, I think.

 

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

 

 

 

Maybe that comment in the demo could be a bit misleading, @GreenSock / @Cassie ?

 

/* set a height because the contents are position: absolute, thus natively there's no height */
height: 4000px;

 

... I think people could be interpreting it as;

ScrollSmoother will always set all contents to position absolute and thus it will always be neccessary to set a specific height.

 

 

 

3 hours ago, Vineeth Achari said:

I would like to make a similar text animation using GreenSock. Can you please suggest how I could achieve that?

 

These forums do not really supply custom-code-solutions, but if you try setting something up yourself and get stuck along the way, we'll be happy to help and nudge you in the right direction as long as it is directly related to GSAP.

 

Fellow @Carl does some great tutorials on animating with GSAP and offers even better courses. This tutorial here on staggered staggers looks like it might be helpful to get an effect similar to the one in video you posted, with a bit of tweaking.

 

https://www.snorkl.tv/staggered-staggers-for-enter-and-leave-animation-sequences-gsap-3/

 

Also check out his other courses - they are great learning ressources.

 

 

 

 

[Vineeth Achari]

19 hours ago, elegantseagulls said:

Hi @Vineeth Achari,

 

You shouldn't need to manually add a height in to #smooth-content. If you have a pin: true ScrollTrigger animation with an end: '+=4000' that should automatically add that height you're looking for without overlapping or creating any weird gaps at the bottom.

 

Hi ,

 

Have updated with 'pin' 'end' etc. Still extra height is there...

 

Here's the code for your reference.

// JavaScript Document
gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

// create the smooth scroller FIRST!
let smoother = ScrollSmoother.create({
  smooth: 2,   // seconds it takes to "catch up" to native scroll position
  effects: true, // look for data-speed and data-lag attributes on elements and animate accordingly
  smoothTouch: 0.1,
  normalizeScroll: true,
  ignoreMobileResize: true,
  pin: true,
  end: '+=4000'
});

[elegantseagulls]

36 minutes ago, Vineeth Achari said:

 

Have updated with 'pin' 'end' etc. Still extra height is there...

Are you able to create a minimal demo for us to see?: