Jump to content
Search Community

Use Data set values with scroll trigger to replace Intersection Observer

ilike.idontlike test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

 

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

 

  • Like 3
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

 

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.

 

 

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

 

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