[Adding scroll trigger functionality to navigate through slider not working]

Thank you for the updated version. The only thing what I experience now is when I scroll and let go, it will move most of the time multiple slides. But I would like to just slide one at a time. Is that also possible? 

 

Already tried to make the duration longer, but this doesn't solve the issue.

See the Pen Babxwwj by Caspert (@Caspert) on CodePen

[Adding scroll trigger functionality to navigate through slider not working]

Thank you for the response. That's a lot easier than I actually thought!
The only thing that I am seeing now is that it is really sensitive to the scroll, is there also a solution for, so it's a lot more sturdy. Something more like this example: 

See the Pen poYVREZ by Caspert (@Caspert) on CodePen

 

Can this be combined or adjusted with a property?

[Adding scroll trigger functionality to navigate through slider not working]

Hi,

 

I just saw the infinite slider of  GSAP, but I want to add another functionality, so when the user scrolls, the slides are snapping in view.

I added the ScrollTrigger functionality, but it seems it not working and I can't find the issue by myself.

 

So does anyone know how I can fix the issue, so the slider can also used with scroll, similar to how the prev and next buttons work?

 

// Use ScrollTrigger to control the slider with scroll
gsap.to(wrapper, {
  scrollTrigger: {
    trigger: wrapper,
    start: "top top",
    end: "bottom bottom",
    scrub: 1, // Controls the sensitivity of the scroll
  },
  onUpdate: (scrollTrigger) => {
    const progress = scrollTrigger.progress;
    const totalDuration = loop.totalDuration();
    const time = progress * totalDuration;
    loop.tweenTo(time);
  },
});

 

See the Pen bGZvKMW by Caspert (@Caspert) on CodePen

[GSAP horizontal carousel where the infinite part is not working]

Hi,

 

I am trying to create an infinite horizontal carousel, but the infinite part is not working. 

The three slides are cloned one time and after the 6 slide it stops.

 

So what I am trying to create is the following. A horizontal carousel slider where the items are full width. 

When scrolling down or up, the slider moves to the left or right and snaps into place. The missing part is the infinite slider, where it will scroll infinite, if this can be an optional thing to add, it would be nice.

 

Here you can find my Codepen. If someone have a better solution or example, please let me know. It will help me a lot.

 

Casper

 

 

See the Pen jOJzKby by Caspert (@Caspert) on CodePen

[Press and hold Tween scale]

Thanks for the updated codepen and answer. Maybe you know if this is made with Greensock: https://www.everest.agency/work/1/signal-snowboards. When scrolling to the 5th section, there is a slider that snaps and has a nice smooth transition. Do you know how this is made? Thanks in advance.

 

[Press and hold Tween scale]

Hi @Shaun Gorneau, 

 

Thank you for the fast reply and of course solution. 

The only thing is it will sometimes freeze on zoom in and will not going back to the default size. Do you know what it is?

[Press and hold Tween scale]

Hi all,

 

I am trying to create a scale animation on click and holding that click. What I would like to achieve is when clicking on an element and holding that click, the image inside will be animation the scale property till it's 2.0. By releasing the click, it will animate back to default scale (1.0).

 

I came with the following code, but doesn't know what the next step is to get the effect I mentioned before.

 

var image = $('img');

		$('li').click(function() {
			TweenMax.to(image, .6, {
				scale: 1.05,
				ease: "smoothInOut",
				onComplete: function() {
					
					TweenMax.to(image, .4, {
						scale: 1,
						ease: "smoothInOut"
					});
				}
			});
		});

 

It's inspired by the following site at the 5th section (the slider).

 

Hope someone can help me a little bit :)

[Recreate dash animation BasicAgency]

Hi all,

 

I was wondering how I can recreate the dash animation on hover over a case study item at: https://basicagency.com/case-studies

Now I digg already in the source code and saw some TweenMax code, but I don't know the clue of how this clean animation is made.

 

Can someone help me out with this?