Jump to content
Search Community

GSAP Timeline Animation on click for multiple DOM elements, Vanilla javascript, no jQuery

Romann test
Moderator Tag

Recommended Posts

Hello good people of GSAP,

 

I have a question on how to use the same timeline for multiple elements on the page, specifically i am looking for Vanilla Javascript solution, yep i saw examples on codepen, but they both are done with use of jQuery  and this is very confusing to me, i am still learning javascript and not familiar with jQuery. Also this codepen examples are using older TweenMax syntax and this is not helpful either.

 

Can someone please give me an idea what i should change or add to my code so animation is happening only on the tile user click, right now it is happening for all tiles at once.  I know i can run forEach method for each of my tile, but i have problem understanding how can i fire event to very specific tile  user clicking.

 

Thanks  !

 

See the Pen xxOBMGN by ivashnev (@ivashnev) on CodePen

Link to comment
Share on other sites

 

Hey @Romann - welcome to the forums :)

 

The looping over the elements with a forEach method is a good way to go.

 

First, inside that method, you should get all the item specific elements that are neccessary for your timeline, and in the timeline you create for each of those items, target those specific elements, something like this

 

    const articles = document.querySelectorAll(".article");

    articles.forEach((item, index) => {

      let headline = item.querySelector("h3.light");
      let allDivs = item.querySelectorAll("header>div");

      // timeline setup

      let tl = gsap.timeline({
        paused: true,
        defaults: { 
          duration: .6,
          ease: "power2.out" 
        },
      })

      tl.to(item, {margin:0})
      tl.to(item, {width:'100vw'},"<")
      tl.to(item, {height:'100vh'},"<")
      ...
      ..
      .

 

 

Then (also in the forEach method ) you could get the specific element, that should trigger the timeline to play, and add an eventlistener with a function to it.

 

Since you want the same close-button to reverse individual timelines, inside that opening function, you could add an eventlistener to the close-button, to make sure, you target that specific timeline when clicking close - and in the closing function, you remove that event listener again when the close-button was clicked. This way you make sure, the close button will always handle the correct timeline.

 

      let dataLink = item.querySelector("[data-link]"); 
      let dataClose = document.querySelector("[data-close]");


      dataLink.addEventListener("click", openUp);  
      function openUp(e) {
          e.preventDefault();
          tl.play()
          dataClose.addEventListener("click", closeAgain);     
      }


      function closeAgain(e) {
        e.preventDefault();
        tl.reverse()
        dataClose.removeEventListener("click", closeAgain);
      } 

 

 

 

All in all that would look something like this

 

See the Pen 1ae3b614f09d86714ada6dee4f65d2ec by akapowl (@akapowl) on CodePen

 

 

 

Hope this helps get a slightly better understanding.

 

Cheers,

Paul

 

 

 

 

 

  • Like 3
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...