[Infinite, draggable slider (with controls) using GSAP v3]

Sure I can create a new thread, but what I try to achieve  is the height to be set by the tallest slider instead of

main {
height:100vh;
}

[Infinite, draggable slider (with controls) using GSAP v3]

what is your suggestion for a slider with content, with different height sizes for the responsive?

 

See the Pen WNaVPrp by superbenj (@superbenj) on CodePen

 

[Dynamic animation from array]

hehe thanks @Dipscom

 

This is pretty much what I"m looking for, except that ideally I remove one div at the time and replace this one with another one, pretty like if you guess the good name then another character appears

 

 

 

[Dynamic animation from array]

Ok, so i did what I think you proposed

 

I'm getting an infinite loop which is what I want, but the delay function doesn't seem to work..

 

but can I use gsap during the script like I did?

 

 

See the Pen abYLjYm by superbenj (@superbenj) on CodePen

 

 

[Dynamic animation from array]

Hello, I wonder if it is possible to make an animation from the data of an array?
Suppose that every second I would like to change one of the 4 divs below randomly with a new character and this every second indefinitely?

 

 

See the Pen GRxMGKJ by superbenj (@superbenj) on CodePen

[Restart animation when completed]

Can I restart an animation when completed?

In this case, showing box 0 after box 3 shows when clicking on the next button?

See the Pen ExQKNWw by superbenj (@superbenj) on CodePen

[Adjust parent height from absolute children]

Is there a way to update  ScrollSmoother onclick? 

because when we click on the second or third button, the footer is not visible?

The pen on the top is updated!

[Adjust parent height from absolute children]

Got it, thanks OSUblake

[Adjust parent height from absolute children]

Is there a way with Gsap to adjust the parent height to fit the new requested section height and get the original height if the new section is closed?

See the Pen VwQeEZB by superbenj (@superbenj) on CodePen

[navigation same page]

I'm using the amazing scrollSmoother. but it seems to have a problem using the navigation on the same page. When you click a section from the navigation you can't return on top of this section.

See the Pen qBpeNeG by superbenj (@superbenj) on CodePen

[Nested Accordion]

But on this demo, what is the right way to animate another element? like the minus appears when the menu is clicked and the plus disappears?

 

See the Pen RwxmOvQ by superbenj (@superbenj) on CodePen

[Animation timing during video blob]

Ok it's in second, I assumed 1 was equal, to 100% and not 1 second.Anyway, I'm gonna work on it. Thanks again for your help

[Animation timing during video blob]

Oh the pen was updated

 

[Animation timing during video blob]

Another question.

If I want to create a smooth animation for the content to disappear/appear, can I use a keyframe?

In my pen, the first animation look's like it waits until the end of the video before starting it?

 

 

once(video, "loadedmetadata", () => {
 tl.fromTo(video, { currentTime: 0 }, {
      currentTime: video.duration || 1,
  duration: 1,
  ease: "none"
    })

tl.to(".panel-1", {
 keyframes: [
  {yPercent:0},
  {yPercent:10, onComplete: () => { console.log('complete')}},
  {yPercent:-100, ease: 'sine.out'}
 ]
},1/4);
  tl.to(".panel-2", {
 opacity:1,
},"<1.5");
  
  tl.to(".panel-2", {
 keyframes: [
  {yPercent:0},
  {yPercent:10, onComplete: () => { console.log('complete')}},
  {yPercent:-100, ease: 'sine.out'}
 ]
},2/4);

[Animation timing during video blob]

Hello

 

I'm trying to create an animation based on the duration of a video that is played frame by frame.

 

Actually, the first text panel disappears when the video start and the last text panel doesn't show..

 

Any advice on changing the first text panel after 1/3 of the duration of the video, then showing the second panel for another 1/3 and finally the last text panel for the last 1/3 and continuing the scrolling?

 

Thank you very much for your time

See the Pen ExovmRZ by superbenj (@superbenj) on CodePen