[Dynamic Caption with Draggable]

You're the best. Let me know. Thanks @Cassie!

[Dynamic Caption with Draggable]

Thanks for getting back @Cassie!

 

I want ".caption2" to pull html from each slide's ".caption3," so it updates as you drag. Kind of like an "active" or "is-selected" function.

So, for slide 1, ".caption2" = 1. Caption1, for slide 2, ".caption2" = 2. Caption2, etc. as you drag or advance with the "prev / next" buttons. 

I added the onDragEnd call, but it still doesn't work. 

[Dynamic Caption with Draggable]

Hi everyone! 

 

I'm trying to fire a function:

 

function activeCaption(){
  caption2.innerHTML = captioner.innerHTML;	  
}

when the enclosed slider's updateProgress() and updateDraggable() fire, but the caption isn't updating. 

Any help is appreciated, as always.

Thanks for taking a look! 

See the Pen rNGyPev by evryali (@evryali) on CodePen

[Scrolling looping the content]

Brilliant! Thanks Jack and @OSUblake.

Super helpful and appreciated, as always. 

Thanks again! 

 

[Scrolling looping the content]

Building from this idea, I wrote a horizontal loop with a ScrollTrigger pin. 

The loop on scroll down feels seamless but scroll up feels "stuck" because of the repeated section (1). 
Any thoughts?

 

See the Pen PoJwvGZ by evryali (@evryali) on CodePen

[Stacking Slider]

Yep. This is great, @akapowl. Thank you! 

I can take it from here. 

[Stacking Slider]

Following up on this thread almost a year later!

Can someone point me to where I can changed the enclosed pen to wrap / loop after reaching the final cell? 

 

See the Pen 09db336c318403519bf48ccd459d3b94 by akapowl (@akapowl) on CodePen

 

All help appreciated, as always. 
M

[Nested Accordion]

Hi everyone, 

I have a simple nested accordion almost behaving as planned. My question is how to achieve the "slide up" animation. Because the class is set to "display:none;" I understand that I won't see the animation as written, but is there an alternative way to handle the class with GSAP to achieve the slide up animation? 

 

Any advice is greatly appreciated. 

Thanks for all! 

 

 

 

See the Pen eYWRjXx by evryali (@evryali) on CodePen

[GSAP 3.6.1 Timeline Issue]

Thanks, Jack. 

 

I removed the second timeline altogether, as you suggest. The code is much leaner now and functions perfectly. I will definitely adopt this approach moving forward.  

 

tl1.to(chars, {
    opacity: 0, 
    duration:1, 
    delay:1, 
    ease: "expo.inOut",
},2)

 

Thanks again for taking the time to help out. 

All best, 
M

[GSAP 3.6.1 Timeline Issue]

THANK YOU, Jack! 

 

Yes, the beta .js resolves the issue. Phew! 

As for the extra .to(), it's a very inelegant way to hold the characters at 1 opacity for whatever interval before transitioning out. For me, it makes sense to partition the before/after states into two timelines. Though, I'm sure there is a better, more efficient way to achieve this. 

 

Again, thanks for getting back. 

I really appreciate GSAP and its community. 

 

[GSAP 3.6.1 Timeline Issue]

Still struggling with this.

How can the same code produce different behaviors between the two versions? 

Thanks for all!

M

[GSAP 3.6.1 Timeline Issue]

Hi everyone, 

 

Having a weird issue with a simple animation with GSAP 3.6.1. When the animation repeats, the timeline breaks and the text blinks, etc. 

 

Using the same code (with GSAP 3.5.1), there is no issue. 

 

GSAP 3.5.1 version:

See the Pen OJWbVEr by evryali (@evryali) on CodePen

 

 

I don't get the discrepancy. What am I missing? 

I appreciate any help, as always. 

 

GSAP 3.6.1 version:

See the Pen wvgLXOq by evryali (@evryali) on CodePen

[Vertical Accordion with Height Reset on Window Resize]

Hi everyone, 

 

I've reviewed examples from the forum on how to achieve a simple vertical accordion. But, I can't get the heights to reset once I adjust the window dimensions.  I know I have to recalculate the heights and reinitiate the animation function, but it keeps breaking. 

 

I appreciate your help. 

M

See the Pen QWdQexQ by evryali (@evryali) on CodePen

[DrawSVG Looping Duration]

Thank you, @PointC!

 

I repeated the beep to extend the track duration. Not trying to sync that

 

Not sure why I was struggling so much with this. But your feedback helped to solve my issue. 

I will be sure to load the audio before initiating animations for my projects. 

Thanks again for the help! 

 

Here's the working pen:  

 

See the Pen rNWRMXp by evryali (@evryali) on CodePen

M

[DrawSVG Looping Duration]

Thanks for the responses!
 

Sorry for not being more clear. 

I want the SVG animation to sync with the duration of the track (pulling from an <audio> tag), but when I use the track duration: 

 

var wholelength = track.duration; 

for the tween duration: 

 

var Tween2 = gsap.to("#target1", { 
  paused: true, 
  repeat:-1, 
  duration:wholelength, 
  ease:"none",
  drawSVG: "0% 100%", 
  repeatDelay:.25
})

It doesn't work. 

 

Basically, I want the the duration for the tween and .mp3 length to match. 
Here's a more reduced pen: 

 

See the Pen rNWRMXp by evryali (@evryali) on CodePen

 

 

[DrawSVG Looping Duration]

Thanks Jack!

 

Here's a reduced pen, with just the GSAP animation. I thought the timer would helpful to measure the sync between the tween duration and the audio's duration. 

 

See the Pen rNWRMXp by evryali (@evryali) on CodePen

 

Thanks again, 
M

 

[DrawSVG Looping Duration]

Hi everyone, 

 

Attempting to set the duration for a simple DrawSVG loop, but the duration isn't syncing correctly. Here's a vid of the problem: 

 

Any help is much appreciated. 

Thanks for all, 

M

 

 

 

See the Pen MWbLZzo by evryali (@evryali) on CodePen

[Reset "X" Variable on Page Load for Pinned ScrollTrigger Width]

Finally following up here. Your feedback put me on the right path. Thank you! 

 

Though this isn't entirely GSAP-related and more a swup issue, it was helpful to learn why one needs to kill the ScrollTrigger events and destroy / update the LocomotiveScroll while transitioning between pages. In the end, updating / destroying the triggers + the scroller with swup events solved my problem: 

 

document.addEventListener('swup:transitionEnd', (event) => {
locoScroll.update();
});

document.addEventListener('swup:willReplaceContent', (event) => {
ScrollTrigger.getAll().forEach(t => t.kill());
locoScroll.destroy();
animation   
});

 

Hope this helps anyone dealing with the same issue. 

Thanks again for all the help. 

M

 

 

[Reset "X" Variable on Page Load for Pinned ScrollTrigger Width]

Following up here, as I still can't figure out why the width doesn't refresh on page load. 

I have enclosed a vid with a live example to better illustrate the issue. The scrollTrigger progress appears in the upper right corner. 

Am I not "killing" / "destroying" the scrollTrigger instance correctly? 

 

My pen is above.

Thanks for all, 
M

 

[Reset "X" Variable on Page Load for Pinned ScrollTrigger Width]

Thanks for reviewing, Zach. 

 

That's right. On initial load, all works well. On page load, I lose the trigger width only.

Everything else works perfectly. 

 

Thanks again. 

 

[Reset "X" Variable on Page Load for Pinned ScrollTrigger Width]

Hi everyone!

 

Like some on this forum, I use swup for site pagination. 

I reset scripts with wrapping functions and an EventListener when content is replaced: 

ex: 

smoothscroll();        
document.addEventListener('swup:contentReplaced', smoothscroll);

This is a great way to re-initiate / replace all of my GSAP timelines after page transitions complete. 

 

But, for some reason, I can't get the the "x" width (below) for the enclosed pin to reset once I've transitioned to a new page. Everything else works: The scroll, the animations, the pin, etc. Just missing the width! 

 

x:() => -(maxWidth - window.innerWidth), 
end:() => maxWidth - document.documentElement.clientWidth + port.offsetWidth

As always, any advice greatly appreciated. 

Thanks! 

 

See the Pen qBqXOPQ by evryali (@evryali) on CodePen

[Stacking Slider]

Beauty. Thanks for the prompt help today, Paul!

Hopefully these demos will help others as well. 

Have a nice weekend! 

[Stacking Slider]

Hi again. 
One last question for this thread. 

Is there a way to adopt the width from a parent div rather than the window innerWidth to establish the slide's width?

I thought I could do this by utilizing GSAP's "getProperty" function, but that doesn't seem to work. 

 

let masterwidth = gsap.getProperty(master.querySelector(".panelWrap"), "width");  

 

Instead of 

 

let iw = window.innerWidth;

Otherwise, the slides bisect when aligned. 

 

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

 

Any thoughts are appreciated! 

[Stacking Slider]

Brilliant. Thanks for this, Paul! 

This is exactly what I needed. 

 

- 

 

I try not to lean too hard on the community for help. 
But help like this is what makes this such a great platform. 

Thanks again!
M 

 

[Stacking Slider]

Hi again. 

 

I've reconfigured the demo to better illustrate the issue. 

There are two slider instances (SLIDER 1 and SLIDER 2). Everything works great.

 

However, the nav dot for the "activeSlide" only works for the SLIDER 1 instance. The dot controls work fine for each, but the nav dot animation (from white to green) only works in the first instance.  

 

Have a look and let me know if the issue I'm describing is clear. 

Would appreciate any help here. Thank you!

 

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