Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Only show animation on respective slider

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi y'all. I need some help here with my current project for university.


Here's what I want to do:

I created a slideshow for which I want to display animations (for example: scale on mouseover), however I want to show different types of animation based off on what slideshow page I am.


Let's say

      I'm on slider 1 / 3 . Here I want the div box to scale:2
      I'm on slider 2 / 3 . Here I want the div box to move x:200
      I'm on slider 3 / 3 . Here I want the div box to opacity:0.2


The thing is I kind of know how to do it, using an if statement, but I'm not entirely sure what I have to put in between the brackets [if (HERE)] to target each slider.

Thank you in advance for all the advice and help : )


See the Pen Zmxpvz?editors=0110 by gabs97 (@gabs97) on CodePen

Link to comment
Share on other sites

Do you mean something like this?:

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


Notice that your original was using querySelector() which will only get the FIRST match, whereas querySelectorAll() will get all matches but of course you've gotta loop through them to attach listeners accordingly. There are actually a lot of ways you could structure this. 


  • Like 4
  • Thanks 1
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.