Side by side vertical split view

[anandpatel]

Does anyone know how to recreate the scroll effect found on this Daft Punk site? https://pitchfork.com/features/cover-story/reader/daft-punk/

 

There there are several images on the left and text on the right, and as you scroll the image on the left are triggered to appear one after another.

 

Any help would be much appreciated.
Thanks Anand. 

[ZachSaucier]

Hey anandpatel,

 

This is the same as most any other animation ran on scroll. I cover how pair an animation with the scroll position in the section titled "Use case: Animating based on the scroll position" of this CSS-Tricks article (I recommend reading the whole thing). Only instead of a fade, you'd rotate the image and switch out which one is visible. 

 

In order to keep it pinned in the same position, it'd be handy to use position: sticky; on the container, just keep in mind browser support.

 

Soon you will be able to use a GSAP plugin to create this effect much more easily! 

[anandpatel]

Thanks for the reply, I can see from your scroll examples that the scroll position controls the fade in and out effect.

 

Do you know how to trigger the animation to start and finish completely instead?

[ZachSaucier]

Just now, anandpatel said:

Do you know how to trigger the animation to start and finish completely instead?

Sure, just play the timeline instead:

if(scrollY > startY && tl.progress() !== 1) {
  tl.play();
}

 

[anandpatel]

I don't suppose anyone know of an example which uses ScrollMagic to trigger an animation?

[PointC]

If you want to create that effect with ScrollMagic, check out the pinning section of the SM docs.

https://scrollmagic.io/examples/basic/simple_pinning.html

 

Please keep in mind that ScrollMagic is not a GreenSock product. In fact, there will soon be a new plugin from GreenSock which will make scroll based animations super easy.

 

[jrhager84]

On 4/15/2020 at 4:11 PM, PointC said:

If you want to create that effect with ScrollMagic, check out the pinning section of the SM docs.

https://scrollmagic.io/examples/basic/simple_pinning.html

 

Please keep in mind that ScrollMagic is not a GreenSock product. In fact, there will soon be a new plugin from GreenSock which will make scroll based animations super easy.

 

What is the timeframe for that? Days? Weeks? Months? 

[ZachSaucier]

1 hour ago, jrhager84 said:

Weeks

Hopefully weeks  

[jrhager84]

6 minutes ago, ZachSaucier said:

Hopefully weeks  

Oh my, that's amazing news!

[anandpatel]

I have been working on an example codepen, but I can't see to get it to match the Daft Punk example.

I am using CSS Sticky position.

 

See the Pen mdeEXpx by anandpatel (@anandpatel) on CodePen

 

Any ideas where I might be going wrong?

[ZachSaucier]

22 minutes ago, anandpatel said:

Any ideas where I might be going wrong?

Perhaps ScrollMagic doesn't work with position: sticky? Perhaps you just set it up wrong? Couldn't tell you. I don't recommend using it.

[anandpatel]

I have managed to resolve the positioning issue, however I have been struggling on how to increase the duration each image is displayed for. Currently the 5th image is shown the longest.

 

Is it possible to change the timeline so that each image is shown an equal amount of time?

[PointC]

If you're controlling the timeline/tween via user scroll speed, you usually want to use a linear ease for the best effect. 

 

As mentioned above, ScrollMagic is not a GreenSock product. I wouldn't advise spending too much time getting things to work with ScrollMagic.  Hang in there and I think you'll like the new plugin when it becomes available.