Jump to content
Search Community

Image Slider w/ GSAP

harp test
Moderator Tag

Recommended Posts

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")


}
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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}))
})

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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:

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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




 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...