Jump to content
Search Community

animation adds empty space for trigger element

pranayraj09 test
Moderator Tag

Recommended Posts

Hello,

Im trying to get rid of that white space that is between 2 divs (abc, xyz) that was created by trigger element. 

can't get rid of it. 

 

I tried with pin and pinspacer but it bit jumpy,

goal is to add a animation with - 

trigger enters viewport normally while the user is scrolling normally, after completing 50% of its viewport scroll, it animates in 1/5th of page speed for 30% of its viewport scroll, then does twice the speed of page scroll for remaining 20%. 

trigger element travels in same direction (bottom to top) like every other element, but just with different speed.

 

See the Pen eYMKaJw by pranayraj09 (@pranayraj09) on CodePen

Link to comment
Share on other sites

Hi @pranayraj09 welcome to the forum!

 

I'm not really sure what you are trying to do. The space between the two divs is created by the red box, so if you don't want that to happen you'll have to change your CSS so that the box is not part of the flow of the document, you could do that with `position: absolute`. 

 

As a general tip you don't want to animate the trigger element of ScrollTrigger, because if you the element you move the trigger, which makes it a cat and mouse game. So wrap the elements you want to element in a custom div and make that the trigger. 

 

Last tip focus on the animation first, remove ScrollTrigger and first make sure you animation is correct before adding ScrollTrigger. Just comment out your ScrollTrigger code and add it back in when you are happy with the animation.

 

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

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