[Draggable slider / carousel with timeline instead of tween]

Hello, 

 

a question. How could I automatically add bullet points and link them to the right slide? I would like to use the bullet points as a navigation.  

[ScrollTrigger with pinned year numbers]

Hello, 

 

unfortunatelly, we have a problem with playing videos that dynamically change their height althought they have a height value from the begining so that this GSAP animation change its start constantly. Is there a trick to avoid this behaviour? 

[ScrollTrigger horizontal 2]

Thank you very much.

 

Hopefully the last question: is it possible to influnce the velocity/speed of scrub on the mobile devices? At the moment, I use scrub: 2 but the scroll speed is too fast still so I would like to have it more natural when I vertically scroll. All divs horizontally scroll by -100%. 

[ScrollTrigger horizontal 2]

Thank you. But how can I call it outside of my function where I define the Draggable part? At the moment, I could do it for the ScrollTrigger like this. Unfortunatelly, I cannot assing any ID to the Draggable part I defined. Otherwise I could use the same logic like for the ScrollTrigger. Is there any possibility to call the Draggable variation out of the function? 

 

Here is my function with the trigger link. 

 

$(function() {
	$('a[data-side-story]').click(function (event) {
		event.preventDefault();
		if (this.hash !== "") {
			var hashSideStory = this.hash;		
			$(hashSideStory).addClass('active');
			$(hashSideStory).parents('.side-story-container').addClass('open-side-story');
			var clickedId = $(this).attr('data-id');
			var parentId = $(this).attr('data-parent-id');
			//console.log(parentId);
			let cleanSideStoryId = hashSideStory.replace('#', '');
			openSideStory(cleanSideStoryId);
			
		}
	});
	$('.side-story-trigger-close').click(function (event) {
		event.preventDefault();
		let triggerId = $(this).closest('.side-story-box').attr('id')
		//console.log("id zum entfernen: " + triggerId);
		ScrollTrigger.getById(triggerId).kill(true);
		gsap.set('#'+triggerId, {clearProps: true});
		//Draggable.getById(triggerId).kill(true);
		$('.side-story-box').removeClass('active');
		$('.side-story-box').parents('.side-story-container').removeClass('open-side-story');
	});
});

function openSideStory(cleanSideStoryId) {
		let mainContainer = "#"+cleanSideStoryId
		let containerInside = cleanSideStoryId + "-wrapper"
		let containerInsideId = document.getElementById(containerInside)
		let containerInsideWidth = document.getElementById(containerInside).offsetWidth
		let triggerButton = document.querySelector('.side-story-box.active .side-story-trigger-close')
		//console.log(triggerButton);

		
		let elementSelector = mainContainer + "-wrapper > div"
		let contentDivs = gsap.utils.toArray(elementSelector)
		
		let offsetValue = 0
		let scrubValue = 2
		
		if(window.innerWidth >= 800){
			offsetValue = 1
			scrubValue = 2
				
		} else if (window.innerWidth >= 1280) {
			offsetValue = 2
		}
		
		let contentDivsWidth = 0 
			contentDivs.forEach(e => {
				contentDivsWidth += e.offsetWidth
				}
			);
		
		//console.log(containerInsideWidth);
		//console.log(contentDivsWidth);
		//console.log(containerInsideWidth < contentDivsWidth);
		if (containerInsideWidth > contentDivsWidth) {
			// do nothing 
		} else {
		let scrollTween = gsap.to(contentDivs, {
			   xPercent: -100 * (contentDivs.length - offsetValue),
			  ease: "none"
			  });
		
		  
		let horizontalScroll = ScrollTrigger.create({
			animation: scrollTween,
			trigger: mainContainer,
			id: cleanSideStoryId,
			start: "top 20",
			end: () => { 
					  return `${100 * contentDivs.length}`
					}, // "+=3000" () => "+=" + contentDivs.offsetWidth
			scrub: scrubValue,
			pin: true,
			onLeave: function() {
					   triggerButton.addEventListener("click", (e) => {
						 triggerButton.click();
					   });
				  },
			  });
			 // total scroll amount divided by the total distance that the sections move gives us the ratio we can apply to the pointer movement so that it fits. 
			 var dragRatio = containerInsideWidth / (window.innerWidth * (contentDivs.length - 1));
			 var drag = Draggable.create(".side-story-proxy", {
			   trigger: mainContainer,
			   type: "x",
			   onPress() {
				 this.startScroll = horizontalScroll.scroll();
			   },
			   onDrag() {
				 horizontalScroll.scroll(this.startScroll - (this.x - this.startX) * dragRatio);
				 // if you don't want it to lag at all while dragging (due to the 1-second scrub), uncomment the next line:
				 //horizontalScroll.getTween().progress(1);
			   }
			 })[0];
		}
	
	
};

 

[ScrollTrigger horizontal 2]

At the end, it works. Thank you. My last question. How can I stop/kill the ScrollTrigger which I have in a function - the ScrollTrigger is as let with name horizontalScroll. I mean I would like to kill it out of the function with a click event. 

[ScrollTrigger horizontal 2]

Thank you very much. Unfortunately, in my case, if I grab it with my mouse and drag it to move it I jump to the top of the page. Is it a common mistake of newbies like me? :)

[ScrollTrigger horizontal 2]

thank you very much.

 

Is it possible to check the width of the all scrolled divs? In my case, the pinned container has the same width like the main window (css width: 100%). So there is no difference that's why I cannot work with offsetWidthfor the pinned container. Instead of this, I need to get the width of the scrolled divs.

 

My question is: how can I calculate it? In my ScrollTrigger, I use the calculate function to define the end of the animation end: () => { return `+=300 + ${100 * contentDivs.length}`},.

 

If I understand it right something similar I could use to get the width of all scrolling div, right? Thank you for your patience. 

 

 

let mainContainer = contentId
var elementSelector = contentId + "-wrapper > div"
var contentDivs = gsap.utils.toArray(elementSelector)
let offsetValue = 0
let scrubValue = 2
		
		if(window.innerWidth >= 800){
			offsetValue = 1
			scrubValue = 0.4
				
		} else if (window.innerWidth >= 1280) {
			offsetValue = 2
		}

let scrollTween = gsap.to(contentDivs, {
			   xPercent: -100 * (contentDivs.length - offsetValue),
			  ease: "none"
			  });
			  
		let horizontalScroll = ScrollTrigger.create({
			animation: scrollTween,
			trigger: mainContainer,
			end: () => { 
					  return `+=300 + ${100 * contentDivs.length}`
					}, // "+=3000" () => "+=" + contentDivs.offsetWidth
			scrub: scrubValue,
			pin: true,
			onComplete: function() {
					   document.querySelector('.side-story-container').classList.remove('open-side-story');
					   document.querySelector('.side-story-box').classList.remove('active');
					   //ScrollTrigger.kill();
					   gsap.set(parentContainerId, {position: "static"});
				  },
			  });
			  // total scroll amount divided by the total distance that the sections move gives us the ratio we can apply to the pointer movement so that it fits. 
			  var dragRatio = mainContainer.offsetWidth / (window.innerWidth * (contentDivs.length - 1));
			  var drag = Draggable.create(".proxy", {
				trigger: mainContainer,
				type: "x",
				onPress() {
				  this.startScroll = horizontalScroll.scroll();
				},
				onDrag() {
				  horizontalScroll.scroll(this.startScroll - (this.x - this.startX) * dragRatio);
				  // if you don't want it to lag at all while dragging (due to the 1-second scrub), uncomment the next line:
				  //horizontalScroll.getTween().progress(1);
				}
			  })[0];

 

[ScrollTrigger horizontal 2]

Antoher question. Is it possible to activate the draggen gestures for mobile diveces to able this scrolling possibility too? 

[ScrollTrigger horizontal 2]

Ok. Thank you. 

 

Another question. Can I check if it's necessary to scroll the content divs as long as all of them are in the viewport? 

[ScrollTrigger horizontal 2]

Here is the current CodePen 

 

[ScrollTrigger horizontal 2]

Unfortunately, it doesn’t work because the ofsetWidth is undefined then - if I use it without +=3000. 

[ScrollTrigger horizontal 2]

Hello, 

 

my code works but only one thing I need to improve - at the moment, the animation ends with end: "+=3000" altough when I scroll to the last div the main container stops to by pinned correctly earlier but its padding-bottom value is still too big so it takes time to reach the following element (especialy in the mobile version).

 

I can understand that the end value influences the padding-bottom value. That's why I would like to calculate the horizontal scrolling area to get the right value for the end value

 

Could anybody help me with this part, please? 

 

function openSideStory2(clickedId, parentId) {
		var contentId = '#'+clickedId;
		var parentContainerId = '#'+parentId;
		let mainContainer = contentId
		var elementSelector = contentId + "-wrapper > div";
		var contentDivs = gsap.utils.toArray(elementSelector);
	
	gsap.to(contentDivs, {
			   xPercent: -100 * (contentDivs.length - 1),
			  ease: "none", 
			  scrollTrigger: {
				 trigger: '#side-story-container-11530',
				  end: "+=3000" , // "+=3000", () => "+=" + contentDivs.offsetWidth
				  endTrigger: 'elementSelector:last-child',
				  scrub: 0.4,
				  pin: true,
				  onComplete: function() {
					   document.querySelector('.side-story-container').classList.remove('open-side-story');
					   document.querySelector('.side-story-box').classList.remove('active');
					   gsap.set(parentContainerId, {position: "static"});
				  },
				 }
			  });
};

 

[ScrollTrigger horizontal 2]

Another question - is it necessary that the scrolled part is absolute positioned?

[ScrollTrigger: Show and hide each section step by step by scrolling position]

My colleague made this. It seems to be the right solution. What do you think?  

See the Pen mdBRMQy by tarun-uwe (@tarun-uwe) on CodePen

[ScrollTrigger: Show and hide each section step by step by scrolling position]

well, I got stuck. I tried to do it with the timeline but obviously I cannot understand the logic as well. I guess I have to do a loop for each of the odd and even element? 

 

See the Pen GRMjLqJ by jankout (@jankout) on CodePen

[ScrollTrigger: Show and hide each section step by step by scrolling position]

This is a great solution. Thank you very much.

 

A question: how can I do it that each odd layer comes from top and each even layer comes from bottom? I guess I have to use the timeline and then the pseudo classes nth-child(even) and nth-child(odd). Right?

[ScrollTrigger: Show and hide each section step by step by scrolling position]

Hello, 

 

I would like to create a similar effect like following website has. Unfortunatelly, by now I'm quite new here and need any help to understand to logic I shall use for this example. I would appreciate to get any inspiration how I can start with it. 

[ScrollTrigger horizontal 2]

Thank you. I will try it and make another demo to post it here. Another question. Which is the best method to initiate gsap code to give gsap the right position of target elements? Sometimes I can see wrong position of the pined elements in my website. I guess it’s because of late loaded imagines that influence the whole height of the website. What would you recommend? 

[ScrollTrigger horizontal 2]

Hey, thank you very much for your respond. I still have some questions. Unfortunately, it cannot get this to work yet. I think I have to change some CSS rules to fix it too - am I right? One of my questions is: where shall I put the timeline? As you wrote after this ScrollTrigger can recalculate the with of the new open content container. 

[Scrolling through items within fixed item]

@OSUblake, thank you for your response.

 

At the moment, I set for the trigger end '3000px', but I would like to have this value dynamical because my users will have different number of items there. So I need to calculate the height of the trigger dynamically. Hopefully I express it clearly. 

 

Would it be possible to use something like this to get the height of all images (or something else with a clear height) there and use this value as trigger end? 

let contents = document.querySelectorAll('.image-container')
let contentHeight = gsap.getProperty(contents, "height");

 

Here my .js 

 

gsap.registerPlugin(ScrollTrigger);

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".layer-story-pinned-content",
    scrub: true,
    pin: true,
    start: "top 30",
    end: '3000px',
    //endTrigger: '.layer-story-pinned-content',
    markers: true
  }
});

tl.from(
  ".layer-story-content-wrapper",
  { y: 20, autoAlpha: 0, stagger: 0.5 },
  0
).to(
  ".layer-story-content-wrapper",
  {
    y: 0,
    autoAlpha: 0,
    stagger: 0.5
  },
  0.4
);
tl.from(
  ".layer-story-image",
  { y: 0, autoAlpha: 0, stagger: 0.5 },
  0
).to(
  ".layer-story-image",
  {
    y: 0,
    autoAlpha: 1,
    stagger: 0.5
  },
  0.4
);

 

See the Pen ZEJOypz?editors=0100 by jankout (@jankout) on CodePen

[Scrolling through items within fixed item]

Hello @Cassie, thank you very much for your help. 

 

What if I would like to have it more dynamicale it means that the end of the animation will be (re)calculated by the ScrollTrigger according to the content height? At the moment, we set the heigt of the main wrapper (layer-story-box) manually because the items we animate are positioned absolutelly. But in my case it must be (re)calculated dynamically because there will be different number of items. Is it obligade to set the position to absolute? 

 

Would it be possible to (re)calculate the content height and set it to the ScrollTrigger? I guess I could use something like this? 

 

let contents = document.querySelectorAll('.image-container')
let contentHeight = gsap.getProperty(contents, "height");

 

[ScrollTrigger with pinned year numbers]

@akapowl yes, you are right. I ment .contents +, of course 

 

Thank you.

[ScrollTrigger with pinned year numbers]

Hello @akapowl, thank you very much for your quick and helpful response.

 

I'm just curious how I can tell to the .main-number to finish the pinning effect at the end of .contents or at the begining of the follow HTML element in DOM - let's say something very common like .contents + *.

 

At the moment you use as endTrigger section.two. Is it possible to use it I would like to (.contents + *)? I've already tried it but it didn't work. 

[ScrollTrigger with pinned year numbers]

Hello Cassie, thank you very much for your helpful response.

 

In general I would like to pinn the first year and just to pinn the others as soon they reach the same level of the main year. The pinned effect of the main year should end as soon as the container with the contents comes to its scrolled end. 

What if I would like to fade out each number after the pinned effect finishes? Should I use onLeave() or something else? Is it possible to use autoAlpha, rotate etc. there or isn’t possible and I need to define a timeline?

[ScrollTrigger with pinned year numbers]

Hello, 

 

I'm quite new here and I would like to pin and show every year number as soon as the container with the year and text appears next to the main number which is already pinned. Both effects shall end at the scrolled bottom of each content. 

 

I've already used the method forEach bute it seems that I didn't use it propertly. Does anybody know how I can solve this issue? 

See the Pen RwZWKyX by jankout (@jankout) on CodePen