Image Slider w/ GSAP

[harp]

Hello,
 

Hope everyone is safe and well.

I wanted to learn how to make an image slider like this:
https://www.canvasunited.com/

How/where can I get started and say if I have a loading bar which once fills up it changes the slide.. how do do that?

Thank you. Any tips would be greatly appreciated. 

[ZachSaucier]

12 hours ago, harp said:

say if I have a loading bar which once fills up it changes the slide.. how do do that?

Like any programming problem, you need to break this down into pieces. So you tell us: how could you break this down into pieces?

[harp]

1) make the bar grow to 100%
2) once bar groaws fade out the current numbers and place the new numbers: 1-2 turns into 2 - 3

I did this so far but didn't work right:
Any guidance on what is maybe wrong or how to improve?
 

/*
* Purpose: Looped slider
*
* 1. make slider bar grow 100%
* 2. make numbers change
* 3. change background image
* */

export default function indexSlider(){

    const sliderBarDynamic = document.querySelector("#sliderBarDynamic"),
          count = document.querySelectorAll(".count"),
          sliderImage = document.querySelector("#sliderImage1");


    // other animation in another js file: console.log(eA().totalDuration()) = 4.2

    let tl = gsap.timeline({ delay: 6.2});
    tl
        .to(sliderBarDynamic, {duration: 4, height: "100%"})
        .add(function(){
            for(let i = 0; i < count.length; i++){
                if(count[i].classList.contains("count-is-active")){
                    count[i].classList.remove("count-is-active")
                    // count[i].classList.add("count-not-active");
                    // count[i+1].classList.remove("count-not-active")
                    // count[i+3].classList.add("count-is-active")
                }
            }
        })
        .to(sliderBarDynamic, {duration: 0.4, height: 0, transformOrigin: "0% 100%"})
        .to(sliderImage, {duration: 1, opacity: 0}, "-=0.2")


}

[ZachSaucier]

Good start. A few notes:

• In general, it's best to animate the scaleY instead of the height whenever you're able to as it performs better. 
• Generally speaking, you make it harder on yourself by toggling classes instead of just setting or animating properties directly.
• It's really help for us in helping you if you include a bare-bones demo of the issue that you're facing. This thread talks more about how to do that:
  https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

Keep it up, feel free to ask if you have any specific questions.

[harp]

Okay thank you.

 

1) yes I’ll use scaleY - transform properties 

2) yes it didn’t feel right lol.. didn’t seem clean either

3) yes I’ll do just that, I’ll create a barebones version on codepen and resend a more complete version. 

 

Thank you. 

[harp]

This is what I have so far  coming together quiet well!  

See the Pen abvVOeL?editors=1010 by designsbyharp (@designsbyharp) on CodePen.

[harp]

Okay done:

See the Pen abvVOeL?editors=1100 by designsbyharp (@designsbyharp) on CodePen.

Any way to fix my main function doCount()?

Thank you.

[ZachSaucier]

Please use the "fork" button of CodePen in the bottom right when making new versions to post to the forums here. That way people looking on to the thread later will have the full context.

 

That demo does nothing for me, most the stuff is commented out. I don't see any code besides some timelines. What are you expecting me to see? Maybe it'd help to remove all the irrelevant parts?

[harp]

My apologies.. forked it and fixed the comment issues.. I started testing something out so thats why commented.

See the Pen YzyYJPW?editors=0010 by designsbyharp (@designsbyharp) on CodePen.

[ZachSaucier]

Some comments:

• Avoid using setIntervals for this sort of thing. You probably don't need any waiting at all in this case, you just need to set up your timeline properly, but if for some reason you do need to use a delayed call I highly recommend using gsap.delayedCall() instead of a setTimeout because setTimeouts don't pause when you're navigating to a different tab. So it breaks when you navigate away from the slider page then come back to it.
• You've got a lot of tweens and repetition in the doCount function. That almost always means that you can refractor it to keep it more DRY (don't repeat yourself) by using defaults, functions, or something like that better. I write about a bunch of different tips to improve that and animate efficiently in this CSS-Tricks article.
• We recommend that you use the condensed string form of eases in GSAP 3. For example "power3" vs Power3.easeOut.
• We recommend putting the duration inside of the vars parameter in GSAP 3 so that you can use GSAP 3's defaults.
• You might consider using GSAP 3's .wrap() utility function instead of if/else-ing the count.

I recommend that you use this approximate form instead of your current approach:

const sliderTL = gsap.timeline({repeat: -1});
const slides = document.querySelectorAll(".slide");

// Add the animation(s) for each slide as necessary
slides.forEach(slide => {
  tl.to(slide.querySelector("text"), {...});
  // ... more tweens ...
});

// Now you  have your whole timeline ready to go

 

[harp]

okay thanks, this is very helpful I'll redo it with these points you made. Question:

also!!! I made my slider wrong then in html!!!! each slide(.slide) should have its own image, text, and etc.

then loop through each slide for a forEach and animate each of its elements right?

 

where to insert the count value? 

slides.forEach(slide => { tl.to(slide.querySelector(".text")[currentCount]});

And to increment the count best to use a .wrap() utility function?

[ZachSaucier]

40 minutes ago, harp said:

I made my slider wrong then in html!!!! each slide(.slide) should have its own image, text, and etc.

then loop through each slide for a forEach and animate each of its elements right?

That makes sense to me but you can set it up differently if you want. You just need the right references in your JS.

 

40 minutes ago, harp said:

where to insert the count value? 

Why do you need a count value? It's a timeline, it will go through all of them anyway.

[harp]

ohhh just use to a count thats why wondering,. So it will loop through each slide and its elements will be animated. If we wanted to use buttons then we would use count references right.. but for an infinite loop slider its not needed?

[ZachSaucier]

You haven't said anything about buttons yet  

 

There are different ways to do buttons. One way would be to animate through the timeline. This might be preferable if you can only go from one slide to the one next to it. If people can skip between slides then it would make more sense to set it up differently where you have a function that animates to a particular slide based on the parameter. Then you use GSAP's .delayedCall()s to call the next (more similarly to your approach before).

[harp]

See the Pen MWarzqJ by designsbyharp (@designsbyharp) on CodePen.

 

 

Getting this error:

 

gsap.min.js:10 Uncaught TypeError: Cannot set property 'parent' of undefined
    at ca (gsap.min.js:10)
    at Timeline.to (gsap.min.js:10)
    at pen.js:20
    at NodeList.forEach (<anonymous>)
    at pen.js:19

const sliderTL = gsap.timeline({repeat: -1});
const slides = document.querySelectorAll(".slide");

slides.forEach(slide => {
  sliderTL.to(slide.querySelector(".slide__text", {duration: 1, opacity: 0}))
})

 

[ZachSaucier]

2 minutes ago, harp said:

Cannot set property 'parent' of undefined

You didn't close the parenthesis:

slide.querySelector(".slide__text")

 

[harp]

okay thanks.

im trying to animate the second slide in now.. but not working:

See the Pen VwvyVJq by designsbyharp (@designsbyharp) on CodePen.

[ZachSaucier]

Here's one way to set it up:

See the Pen OJyzrLP?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

The docs about the position parameter can help you understand what the "+=3" is for.

[harp]

Trying to understand whats happening here with .fromTo:

slides.forEach((slide, i) =>{
  
  tl
  .fromTo(dynamicBar, {delay: 1, duration: 3, scaleY: 0}, {duration: 2, scaleY: 1})
  
})

I tried .from only but it doesn't work, how come I have to use .fromTo to make the dynamicBar grow over and over again? Also delay doesn't work.. need it to grow 5 seconds after the first one does but also make it fade away and then grow again. Thank you.

See the Pen YzyvEep by designsbyharp (@designsbyharp) on CodePen.

[ZachSaucier]

Hey Harp. You need to put special properties for fromTo tweens in the toVars. That's why the delay doesn't work. It's likely also related to why the .from() won't work but since you didn't show it not working it's hard to say.

 

I highly recommend going through the Getting Started article carefully:

 

[harp]

okay got it thanks!

here is the just .from version. It only grows the dynamicBar once.. shouldn't it work on every slide? and why does having scaleY: 1 work with a .fromTo? and not just .from?

See the Pen dyYKZgO by designsbyharp (@designsbyharp) on CodePen.

[harp]

ohhh okayyyyy so with .fromTo, the .fin this is the starting point and .to in this is the end point.

if you only use .from then its the starting point as well but ends at the already set css value or if a value is set with.set
if you use just .to then it creates a new value and works with it.

.fromTo creates a new starting point and end point..

is this correct?

[ZachSaucier]

23 minutes ago, harp said:

.fromTo creates a new starting point and end point..

is this correct?

More or less. .fromTo ignores the current value (but it could be the same as the current value, it doesn't care).

 

Again, I highly recommend the Getting Started article because it walks you through all of this.

[harp]

Okay got it working!! Thank you for all the help.

I definitely need to refactor the code and go through Getting Started article a few times in greater detail, which I'll do now. If theres any pointers, please let me know and I'll start refactoring the code more.

Objective: Animate slides but don't do anything to the first slide, only animate the first slide like the others when timeline restarts/repeats to create the same consistent flow and animations.

This is what I created and thank you for helping!

See the Pen jObpWZg?editors=0110 by designsbyharp (@designsbyharp) on CodePen.