[Stacking Slider]

Thanks, Jack! 

 

There were some major, basic mistakes in my CSS. But, as a follow up I do have a specific GSAP-related question. I am trying to change the dot behavior for each discrete slider instance. I think it's line: 

 

let newDot = document.createElement("div");
newDot.className = "dot";

But when I switch out "document" for "master" or "this," it still doesn't work. 

Am I on the right track? 

 

See the Pen rNMNmMe by euqio (@euqio) on CodePen

[Stacking Slider]

Happy Thanksgiving, everyone! 

 

I'm attempting to stack the enclosed sliders (adapted from @PointC's brilliant demo). I've modified the GSAP to account for the classes and placed the absolute elements into relative sections. What am I missing here? Disabling the wheel action still doesn't allow me to scroll to the lower section. 

 

Wishing the community a restful holiday, 
M

See the Pen XWjWNwe by euqio (@euqio) on CodePen

[NativeTouchScrolling with Draggable on iOS]

Beautiful. Thanks, Zach! 

[NativeTouchScrolling with Draggable on iOS]

Hoping this is a quick fix. I've looked over the forums and implemented (allowNativeTouchScrolling: true) for GSAP's boilerplate slider, but it still interrupts the vertical scroll. I'd just like to glide over it, like any image, etc. 

 

Appreciate any help here: 

Thanks for all. 

See the Pen KKzmeRd by euqio (@euqio) on CodePen

[Basic Wrap / Append for Marquee Effect]

Thanks, Zach. 

 

That set me on the right path. Not entirely a matchmedia / media query solution, but this fixed the mobile issue for me: 

 

let cachedWidth = $(window).width();	
$(window).resize(function(){
    
var newWidth = $(window).width();
if(newWidth !== cachedWidth){
			
if(anim) anim.play(0);
totalDistance = $(ticker).width() / 2;
    
    	anim = gsap.to(ticker, { 
      	duration: dur,
      	x: -totalDistance,
      	ease: "none",
      	repeat: -1, 
      	overwrite: true
    	});	
        
cachedWidth = newWidth;
        
}
});

 

Probably not the most elegant fix, but happy the timelines are preserved on scroll without resetting. 

Reposting if it helps anyone. 

 

See the Pen RwaKmOw by euqio (@euqio) on CodePen

  

[Basic Wrap / Append for Marquee Effect]

Following up on this thread with a quick question. 

I've noticed on mobile that scrolling down resets the animation (calls the window resize function, playing the timeline from zero). 

Is there a way to avoid this, so the animations play without resetting on scroll? 

[Timeline Auto Height Issue]

Got it!

 

Here's the final animation, if it helps anyone. 

I used .revert(); to reset the split. 

 

$(window).resize(function(){
  master.kill();
  master = gsap.timeline({repeat: -1, repeatRefresh:true}); 
  gsap.utils.toArray(".quotes").forEach((quote) => {  
  quote.split.revert();}); 
  sequence();
 });

See the Pen yLOYWme by euqio (@euqio) on CodePen

[Timeline Auto Height Issue]

Got it! 

I created a function that reinitiates on window resize.  

Now, I just need to reset the SplitText.

Thanks for the help, Zach!

 

$(window).resize(function(){
  master.kill();
  master = gsap.timeline({repeat: -1, repeatRefresh:true}); 
  sequence();
 });

See the Pen WNwQzBj by euqio (@euqio) on CodePen

[Timeline Auto Height Issue]

Thanks for the prompt feedback, Zach. 

 

Like this? 

I read over the enclosed article, focusing on tip #8: 

https://css-tricks.com/tips-for-writing-animation-code-efficiently/

But  still not getting the logic right.

 

Thanks for the help. 

 

   $(window).on("resize", function() {
   
   tl.kill();

   const new_tl = gsap.timeline();
   
	new_tl.to(".move", {
    y: gsap.getProperty(quote, "height"), 
    ease: "expo.inOut",
    duration:2
 	})
  
    new_tl.fromTo(quote, {
    opacity:0,
    }, {
    opacity: 1, 
    duration: .5,
    ease: "expo.inOut",
  	}) 
  
   	.to(quote, {
    opacity: 0, 
    duration:.5,
	}, "+=2")	

 });

 

[Timeline Auto Height Issue]

Hi again, 

 

 $(window).on("resize", function() {
     gsap.to(".move", {y: gsap.getProperty(quote, "height"), ease: "expo.inOut", duration:1});
 });

Is there a reason why the "y" value doesn't set on resize? 

Thanks for all! 

 

See the Pen WNwQzBj by euqio (@euqio) on CodePen

[Timeline Auto Height Issue]

Yes. Thank you, Zach! 

 

The "gsap.getProperty(quote, "height")" is what I was looking for. 

 

This is a great help. 

Thank you!!

[Timeline Auto Height Issue]

Okay.

Here's a last attempt to convey the issue I'm trying to solve. 

Is there a way to dynamically push the relative position of the red container with the relative height of the "quote" timeline.

 

 

Apologies for the inline styles. 

 

[Timeline Auto Height Issue]

Haha, very well.

Thanks for your help, Zach. 
I appreciate it!

[Timeline Auto Height Issue]

Not entirely.

 

It's two independent timelines ('quotes" AND "impressions"), each with their own duration and with their own container running simultaneously. Here, they are spaced, but I'd like them to stack. 

 

 

Does that make more sense?

[Timeline Auto Height Issue]

Sorry for the protraction here, Zach. 

It's still not working. Maybe I'm not explaining the issue correctly. Is it possible to get the absolute divs to stack with the variable heights of the different quotes? 

 

1A  |  1B

2A  |  2B

 

 

[Timeline Auto Height Issue]

Thank you, Zach! 

 

Taking that approach does not keep the sections stacked, though. Now, there's a gap between the 1A / 1B elements. What am I doing wrong here? 

Thanks again! 

 

 

[Timeline Auto Height Issue]

Hi everyone! 

 

I have two, type-based timelines running simultaneously. Because sentence length varies and the position of the animation is absolute, I'm trying to figure out how to format the animations so they adapt to their changing heights (stacked, one under the other). I've tried using various css options without success. Any ideas on how to set auto heights dynamically? 

 

I appreciate any help here. 

See the Pen PoNPYJx by euqio (@euqio) on CodePen

[GSAP CDN 3.4.0]

Noticed this too. 

[Dynamic Widths for GSAP Auto-Slider]

Thanks for getting back, Zach. 

 

I note the difference above. One is a scrollTrigger / scroll-activated horizontal scroll, the other is an infinite auto-slider.  My question relates specifically to GSAP's auto-slider (

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

) and how to calculate wrapper width with slides of varying / dynamic widths.  

 

In the the pen I submitted, the slider doesn't calculate the variable slide widths without breaking. You can see the issue in slide 2 of the submitted pen. 

 

Does that make sense? Thanks again! 

 

 

[Dynamic Widths for GSAP Auto-Slider]

Hi everyone, 

Attempting to set dynamic widths for GSAP's boilerplate auto-slider. Searching though the forums, Jack offered up a beautiful scrollTrigger implementation:

 

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

 

but I'd like to preserve the draggable functionality here. 

As always, appreciate any help here. 

 

See the Pen BajOmNJ by euqio (@euqio) on CodePen

[Basic Wrap / Append for Marquee Effect]

Thanks again for the follow up and continued assistance here, Zach!

 

This really is a huge help. 

I really appreciate it and hope it helps others too. 

 

Okay, no more questions from me. 

This is exactly what I need. 

 

Thanks again,
M 

[Basic Wrap / Append for Marquee Effect]

Thanks again, Zach. 

Hopefully my last GSAP-specific question for the thread: 

 

See the Pen NWxMdpW by euqio (@euqio) on CodePen

 

I have a play(0); set on resize and just need to reset the totalDistance and clone. I've tried restating the animation and 'totalDistance' var, but the clone doesn't repeat on resize. After tinkering for hours, I still don't know what I'm missing here. 

Thanks again. 
M 

[Basic Wrap / Append for Marquee Effect]

Awesome. Thanks again for following up, Zach!

 

I added the enclosed listener function, but when I resize the browser, the marquee accelerates its duration (but maintains the width!).  

- -

window.addEventListener("resize", setPosition);

setPosition(); 

- -

See the Pen NWxMdpW by euqio (@euqio) on CodePen

 

[Basic Wrap / Append for Marquee Effect]

Thanks for getting back, Zach. 

 

I really appreciate it. 
Unfortunately, no. I deleted the updated pen after tinkering without any luck. I've reproduced it here: 

See the Pen NWxMdpW by euqio (@euqio) on CodePen

 

And would love to receive any help here. 

Thanks again for following up! 

[Locomotive / ScrollTrigger Integration]

Thanks, Jack!

This is exactly what I was hoping to achieve. Thanks for taking the time. 

Is there a way to link to the new beta version of ScrollTrigger to test with more ScrollTrigger(ing)?

 

I've learned so much from the support here and love GSAP.   

Thanks for all!