Nikhil009

Hello, might anyone know why the cursor is is tweening only on the last element and not on the first two, i have added a for each loop on the targeted elements but yet only works on the last one. I think it might be the if condition although it is giving true outcomes. https://codepen.io/nikhil-ladhani-nl/pen/bGpWmXd

Hey Zach, I have read the documents and man I am working on old ones since long, Thank you very much for showing me De Way With that I have made improvement in my code as well as changed it to make it simpler and voila it is working as expected. Below is the code pen if you any of you want to have a look and see the results. The only thing i am trying to figure out is that jquery does not convert the css- transform: translate(100%) as it is, but it converts to pixels but all is good. Thank you very very much. https://codepen.io/nikhil-ladhani-nl/pen/mdPqWjy

Hello, Thank you, yepp i am able to see that mainly but chars = splitText.lines; I wanna use the chars as the variable instead of the $slides. Whereby var $slides = $slider.find(".slider-item"); var $prevSlide = $slides.eq(prevSlideID); var $currentSlide = $slides.eq(currentSlideID); TweenMax.to($prevSlide, time, { top: "-100%" }); If you see the code above the tween is occurring on the word but as the whole item not the specific line like the on you showed me on developer tools, and if is replace the $slide with chars the .eq function does not work, because i want to add staggering on the text as well Any chance you might be knowing how handle this

Hi, I have made a vertical slider with text, i want to add in the SplitText plugin that i have added but doesn't seem to work it on the code. I have added the codepen below. Can anyone help to see where i am going wrong. Thank you very much

Hey Zach, Actually figured it form one of the projects, but thank you very much for the help Cheers

Thank you very much Zach I'm struggling a bit to combine the magnetic effect with the cursor one, as it's an urgent on the project i have to implement in. Any chance i can get an example?

Is there a way to achieve the effect of mouse hover like on the website below: https://studiomaertens.com/about if you hover on the Work or About link, there is a magentic effect on it as well as the cursor automatically scales and positions itself in center with the link, So far ive managed to combine two different examples together, the magnetic effect works but the cursor doesnt align properly with the icons https://codepen.io/pen/?template=mdPmPbK Might there be a way to make a similar effect on the Studiomaertens website above. Kindly let me know Thank you

Hello, I am trying to create an explosion on one button click and reverse of another button click of particles on three.js and TimelineMax, is there a simple example or place i can learn from? Please kindly let me know Thank you

Hi Zach, Ahhhh i see i see, it gets confusing whenever i try use scroll animation especially the calculations, offset top, scroll top, outer height , inner height, still catching up on that but I am slowly understanding the concept behind what you sent. But i think im making it look more complicated than it seems because im confusing myself, but will learn. Thank Very Very Much again 🙂.

Hi, Is there any way to achieve this type of animation while scrolling. Im getting confused on the part where when if you scroll down new text-1 appear from bottom and current text-2 exit to up and reverse when scroll back up text-2 appears from top and text-1 exits bottom https://www.apple.com/nz/ipad-pro/ The above is part of the section whereby when you scroll up the content fades down and when you scroll down content fades up Similar to the above website, please kindly help me. Thank You

Thank you, Thank You very much, I have gotten and yet learning more on the concept of how to animate but you have guided me to what I wanted, I shall use the .play from now on to animate instead of the scroll listener 🙂 Happy and glad to use GSAP for animations as well!

Hey Zach, Thank You for the welcome! I am very new to gsap making it abit otugh for me to understand some stuff you said about the timeline controls although I have managed to replicate it on codepen As you can see at first the photobio title appears first rather than the top two titles and then if scroll directly it kinda breaks the gsap and doesnt animate properly, I think it might be because of the revert, as well as invisibilty hidden. https://codepen.io/nikhil-ladhani-nl/pen/JjdZbXE Hope this helps

Hi, I am looking for a solution that combines the two different text animations like on the websites below, I am also using fullpage js. https://wirewerks.com/en/about-us/ https://21-capital.com/ So on each index of the page I am using if function for the animation, although without reverting the splittext it creates a duplicate each time i scroll to the specified animation page as it runs it again and again, that is why i had to revert it. Sorry for not being able to replicate the code work on codepen. var mainTitles = new SplitText('.strength-title h1, .free-session-title h1', { type: "lines", linesClass: "line line++" }); $('.strength-title h1 .line , .free-session-title h1 .line, .photobio-title h1 .line').wrap('<div class="line-wrapper">'); TweenMax.staggerFrom( mainTitles.lines, 2, { yPercent: 100, ease: Power4.easeOut, delay: 1 }, 0.25, splitRevert ); $('.strength-title h1, .free-session-title h1').css('visibility', 'visible'); var tp = gsap.timeline(), mySplitText = new SplitText(".photobio-title p", { type: "lines,words" }), chars = mySplitText.lines; tp.fromTo(chars, 1.5, { opacity: 1, y: 0, ease: Power4.easeOut, stagger: 0.15, // }, { // opacity: 0, // y: 100, // ease: Power4.easeOut, // stagger: 0, // }, "+=0"); // // function splitRevert() { // $('.strength-title h1 .line , .free-session-title h1 .line , .photobio-title h1 .line').unwrap(); // mainTitles.revert(); $('.photobio-title p').css('visibility', 'hidden'); mySplitText.revert(); } This formation is not currently working smoothly for me, if anyone has a possible solution please kindly do help me. Thank You