ScrollTrigger use in a timeline

[rctneil]

Hello,

 

We are building a vertical timeline with timeline items positioned left and right alternately. All the items are blurred by default.  We wish to sharpen them up as they are scrolled past a certain point.  We are wondering if ScrollTrigger can be used for this scenario?  If so, are there any examples of similar things you could show us?

 

The blur / unblur is performed just by a class change right now.  

 

We have written this so far without GSAP but wondering if it can help us as we are getting confused managed the trigger points and also activating the first item on page load when one or possibly two items are positioned above the trigger line.

 

Many thanks,

Neil

[akapowl]

 

15 minutes ago, rctneil said:

We are wondering if ScrollTrigger can be used for this scenario?  If so, are there any examples of similar things you could show us?

 

Hey @rctneil

 

Sounds like a great case for ScrollTrigger. Here is an example.

As you see, ScrollTrigger will toggle the aimation of everything that is past that trigger point when loading the page, automatically.

 

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

 

[rctneil]

@akapowl

 

Thanks!  Just as you replied, I found an example online that actually did just what we were after.  Isn't it always the case that you find a decent example just after you've posted asking for help!?

 

The page we have has 210 items in a vertical timeline.  ScrollTrigger does appear to be working perfectly but we think that due to the sheer number of items on the timeline, the page performance is not great.   I realise Scroll Trigger has to do all its measurements etc.  We have used IntersectionObserver to lazy load the images by taking the "data-src" attribute of our img tag and setting it to be the "src" attribute when the image enters the view. This has helped a little but not massively.

 

Is there anything you could recommend in regards to this?

 

We were potentially thinking about some form of overlay that covers everything until loading has completed.  Any suggestions as to how to could do this?

 

Thanks,

Neil

[akapowl]

 

I don't know what your approach looks like, but Tweening on filters like I did above, most certainly is not the most performant thing to do.

 

 

1 hour ago, rctneil said:

I realise Scroll Trigger has to do all its measurements etc.

 

Yes it does, but if you know the dimensions of your images beforehand and set them accordingly, that shouldn't be a problem.

Also, depending on how you have things set up, you could make use of ScrollTrigger's refresh method, when you need to.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.refresh()

 

Click inside the window to add text and see how the markers adjust to the added content

 

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

 

 

 

2 hours ago, rctneil said:

We have used IntersectionObserver to lazy load the images by taking the "data-src" attribute of our img tag and setting it to be the "src" attribute when the image enters the view. This has helped a little but not massively.

 

You could do something similar with the help of ScrollTrigger, as this demo from the demo-page... 

 

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

 

 

...or this other demo show

 

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

 

 

 

2 hours ago, rctneil said:

We were potentially thinking about some form of overlay that covers everything until loading has completed.  Any suggestions as to how to could do this?

 

That could certainly be an option, too. But I guess how to exactly do it depends on how exactly you would want it to work.

The simplest form would be to show the overlay by default and hook into the window load event to trigger a tween for it to fade out.

 

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