[How to do this with the scroll trigger plugin?]

16 minutes ago, akapowl said:

 

Hello @portareset1

 

Are you referring to the fullpage-like page-scroll?

 

As this thread shows, there are certain ways of achieving an effect like this with ScrollTrigger.

 

 

 

It should be stated though that this plugin is not really built for Scrolljacking like that in the first place.

 

by @ZachSaucier

 

 

A different approach could be to use a fullpage-like slider utilizing GSAP like for example those by @PointC mentioned in this thread by @Rodrigo just recently.

 

 

I think they actually use some form of a slider on that website because the individual sections are transforming and it doesn't look to me like there was real scroll going on (I might be wrong though).

 

Hope these suggestions can help you get started. Cheers.

 

awesome! this is exactly what i was looking for 

[How to do this with the scroll trigger plugin?]

EPIC Agency - Effective creativity for digital awesomeness.

I'm curious how this scrolling behaviour can be implemented using the scroll plugin

[ScrollTrigger|Timelime]

13 hours ago, GreenSock said:

The main problem is that your pinned element has no height whatsoever, so everything is collapsed. Just set #main height to 100vh and it should resolve things. I noticed that you're animating a non-existent element at the end too. I assume you meant to animate the #red <div>?: 

 

 

 

Does that help? 

yeah, ive deleted it to fix the animation, that solved my issue but now im gonna try your method

 

EDIT: Your method worked but if i try to add more elements before the main container, the panel with the yPercent -100 animation is displayed before the green which is the first element, try adding some br's like this and you will see what i mean

 

 

  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

[ScrollTrigger|Timelime]

41 minutes ago, tailbreezy said:

No problem.

Also keep in mind that end value in this case is arbitrary and having a higher value just means more time to scroll to reach the end of the timeline.

sorry for disturbing you again, ive added that function to the codepen, everything seems to work normally but the last section isnt displaying correctly

A Pen by portareset1 (codepen.io)

[ScrollTrigger|Timelime]

Just now, tailbreezy said:

No problem.

Also keep in mind that end value in this case is arbitrary and having a higher value just means more time to scroll to reach the end of the timeline.

i've added this to the end end: () => "+=" + innerWidth * sections.length

[ScrollTrigger|Timelime]

52 minutes ago, tailbreezy said:

Here is the pen from the video, in case you want to deconstruct it.

Basically ScrollTrigger is scrubbing through the whole animation one tween at a time, since there are no overlaps set.

 

 

 

 

you deserve the heaven, that solved my problem

[ScrollTrigger|Timelime]

Hello, i'm pretty new to this awesome community that i discovered very recently, today i saw this video : (1) Introducing ScrollTrigger for GSAP - YouTube

and i wanted to do the second 25 animation, an slide-in effect from left, right and bottom, problem is when i replicate the same code that this guy have the timeline only take the first element so when i finish scrolling the first element, the others are ignored and they dont continue the animation, i tried a tons of changes but that didnt helped at all:/

 

See the Pen mdOBExZ by portareset1 (@portareset1) on CodePen