Search the Community

Requirement We are looking for a front-end developer with knowledge on animations (GSAP, three, locomotive, etc.) together with good references and high proficiency on performance. Translating pixel perfect prototypes into high quality code Visual and engineering mindset Great attention about details on design Project Responsive one page website The page has five main sections that are intro, about, works, clients, contact with some transitions between these sections. Scroll trigger functions Thanks for your time, send me a DM with some interesting and visually complex samples that you have done.

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

Hello sorry for asking I am new to GSAP and JS. How can I stop fullpage.js from scrolling if my animation is not complete Please help. Thank you. P.S: I am using TimelineMax.

I'm trying to do some basic fade in animations when changing to pages but having an issue with it being visible in the final location, and then it running the animation. i've tried two ways, using the to and from, as well as a fromTo (but didn't include in my codepen). using the "to" function, it doesn't run again, after leaving and coming back to the page. using the "from" function, it does run again, but have the visibility issue. i've messed with css opacity and various opacity settings and autoalpha etc, im at a loss. im new to gsap, so if anyone knows what i can do in this situation, please let me know. thanks!

I am trying to animate full page(100vh) sections to the viewport and its not working. You can view this same demo http://testanim.bitballoon.com/ (click on "x" icon). As you can see the section that animates into view is visible for a few seconds when it is animating and its opacity resets to zero again from the x position. I would like the section pages to remain visible until I click a button to animate it out of view and sets opacity to zero I don't know what I am doing wrong . Regards.