Use Data set values with scroll trigger to replace Intersection Observer

[ilike.idontlike]

Hi There,

 

I'm loving Scroll trigger and find it super easy to use and have found some really amazing tricks throughout this forum I love about it. But Im having difficulty replicating this effect I've done with Intersection Observer using Scroll trigger. It's quite simple but basically each section has its own dynamic color value and as the user scrolls the value styles the fixed background div in that color. I have a site that has lots of these sections and the color values are dynamic so I can't just write the values in each scroll trigger. Is there a way to rewrite this without Intersection observer and instead use Scroll trigger?

Many thanks for your help

See the Pen qBqoRwr by jo02 (@jo02) on CodePen.

[mikel]

Hey @ilike.idontlike,

 

I like this option:

 

See the Pen MWbVmBG by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

Mikel

[ilike.idontlike]

LEGEND!! Thankyou so much!!

[ilike.idontlike]

I'm also trying to set this up with horizontal scrolling sections (again, using scroll trigger), is it possible to combine the two actions into one scroll trigger or better to have two seperate triggers do you think?

 

[ilike.idontlike]

Sorry for the spam, but also Ive noticed that the tween breaks if the user scrolls too fast, is there anyway of ensuring it isn't triggered unless the user stops scrolling?

 

[mikel]

Hey @ilike.idontlike,

 

You could use overWrite: true 

 

 

overwrite

If true, all tweens of the same targets will be killed immediately regardless of what properties they affect.

Horizontal: Please look in the ScrollTrigger DOCS.
And provide a reduced CodePen of your case.
Then if you have a question, we'd be happy to help.

 

Happy tweening ...

Mikel

[ilike.idontlike]

Hi @mikel I have another codepen for the horizontal scroll. I'm having some difficulty with this one too. 

See the Pen wvomdVr by jo02 (@jo02) on CodePen.

Essentially, i have a row of images, they won't all be the same width so the horizontal scroll needs without a fixed width in the container (unlike the demo example). I took this code from another user on this forum and found that the section actually cuts off at the end, and also snap doesn't work with it either.

Ideally I'd like to combine this scroll trigger with the one you've been so helpful with so far and also have snap enabled so that the image wrapper (full-wrap in my example) would land in the centre of the screen when the user stops scrolling. Is this possible?

[akapowl]

 

Hey @ilike.idontlike

 

If like in your example, you don't set a specific width to each of your elements, you'd have to make sure that all the images which are neccessary for the calculations are loaded before you set up your ScrollTrigger. That could be as simple as hooking into the window's load event.

 

See the Pen 72253f87c660bf6c920728ba12ec34d1 by akapowl (@akapowl) on CodePen.

 

Edit:

I didn't do this the pen above, but you will likely have to also incorporate the margins you have set into the calculations for the horizontal scroll to make it work 100% correct.

 

 

Since you are not using native horizontal scrolling, but 'faking' the horizontal scroll here with a tween on vertical scrolling, you'd have to do some calculations yourself  for when to trigger an animation, when a certain section/image, actually comes into viewport.

 

This demo from the demo page could be helpful to get an understanding on how to do that depending on the sections offsetLeft, the window's width and an offset you'd have to consider because the x-amount of your fake-horizontal tween and the duration of the ScrollTrigger are slightly different.

 

See the Pen ZEpNLZa by GreenSock (@GreenSock) on CodePen.

 

 

I wrote a detailed and lenghty explanation about the mentioned offset in this thread here

 

 

 

Hope this helps.

Cheers,

Paul

 

[ilike.idontlike]

Thanks @akapowl for some pointers there. I actually would prefer to use 'real' horizontal scrolling but would need to still use some scroll trigger animations - is there a way to do this so that I can still implement scroll based animations? (btw when i refer to horizontal scrolling I am talking about mousewheel being used up & down not left & right).

I'm guessing what im currently doing is not possible with lazy loaded images am i right?

[akapowl]

 

I don't know if I really understand what it is you are saying there.

Real horizontal scrolling would be something like this - and of course as shown here you could also use ScrollTrigger for that.

 

See the Pen ff94134f1a6a1780221eb3c1768eba35 by akapowl (@akapowl) on CodePen.

 

 

If you wanted it to work so it scrolls horizontally when the mouse wheel is being rolled up or down, I guess you'd have to hook into the wheel event and write some logic for that yourself  - maybe something like this css-tricks article shows - although it uses jquery and is a bit dated. But I'm pretty sure this should also be easily possible with vanilla JS by now.

 

https://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

 

 

1 hour ago, ilike.idontlike said:

I'm guessing what im currently doing is not possible with lazy loaded images am i right?

 

I think that really depends. If you know the dimensions of your images beforehand and set them accordingly right away that shouldn't be a problem at all.

 

 

[ilike.idontlike]

Thankyou for your response @akapowl. So I had a go at integrating the css tricks mousehweel plug-in with scroll trigger and it doesn't work. The two just dont play together it would seem (either that or my js isn't as far reaching as you might think haha ). I would prefer to use scroll tigger to do the whole lot I reckon as it seems to under complicate what I'm trying to achieve. Is there a way of getting the images to snap in the center by using client bounding rather than their offset? It seems like calculating the offset for each image (where I won't know the width of each, only the height as the aspect ratio's will change in random order), is a bit over my head and not something i can achieve with my limited knowledge

[akapowl]

11 hours ago, ilike.idontlike said:

So I had a go at integrating the css tricks mousehweel plug-in with scroll trigger and it doesn't work. The two just dont play together it would seem (either that or my js isn't as far reaching as you might think haha ).

 

In reference to this I found the forum archive of css-tricks.

 

https://css-tricks.com/forums/topic/how-to-horizontally-scroll-by-mouse-wheel/

 

The codepen that the user "Shikkediel" links to shows how to do it with vanilla java-script. It needs a certain setup to work in the first place and since you are likely going to have to use some other element than the body itself as the scroller for that, you will have to set the scroller to that element in your ScrollTrigger to make it work. Note, that this is considered scrolljacking and you might run into problems along the way when using something like this, which you will have to find a solution for yourself.

 

Here is a the mentioned example in use with ScrollTrigger.

 

See the Pen 9856376ccd3101d34719816ea17d43e2 by akapowl (@akapowl) on CodePen.

 

 

 

11 hours ago, ilike.idontlike said:

Is there a way of getting the images to snap in the center by using client bounding rather than their offset?

 

I am not sure I understood this part of your post and I think there might have been a misunderstanding. When I wrote about calculating the offset I was referring to animating things when certain individual sections come into view on the fake horizontal scrolling because you said you wanted to combine the background-color tween with the fake-horizontal scrolling and it being triggered when a specific image comes into view.

 

This was not meant with regard to snapping.

 

I am not sure what would be the best approach to the snapping part especially with your images having variable widths, but something like this could work:

For each image create a ScrollTrigger with its start and end being set around the center of the window dependent on each images width, and only snap to 0.5 using an array with 0.5 being the only value in it.

 

I am not sure this is bulletproof and there might be an easier way of doing what you want that I don't see right now, but it seems to work decently.

 

See the Pen cda4ab33274fd21b432e15f2a8034a98 by akapowl (@akapowl) on CodePen.

 

 

 

There are quite some things getting mixed up in this thread already - honestly, I think it would be best if you tackled one problem at a time, so you don't get more confused than neccessary, because all this is quite a bit to digest.

 

Hope this helps, though.