Jump to content
GreenSock

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

Only show animation on respective slider

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 post
Share on other sites

Do you mean something like this?:

See the Pen 3f2fad33e09b2cb105a7c4c035a27f1f 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 post
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.

×