Romann Posted November 17, 2020 Share Posted November 17, 2020 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 More sharing options...
akapowl Posted November 17, 2020 Share Posted November 17, 2020 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 3 Link to comment Share on other sites More sharing options...
Romann Posted November 17, 2020 Author Share Posted November 17, 2020 Hi Paul, Thank you for your reply, it all makes sense. Hope this thread will also help other newbies ! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now