Search the Community
Showing results for tags 'onclick start animation'.
Found 3 results
-
I have six sections. Three sections contain buttons. I want to switch between using the scrollbar to advance to the next section in sections 1-3, using an onClick event to advance to sections four and six, and using a setTimeout to advance to section five. Sections 4 - 6 must also be hidden until triggered by the onClick or setTimeout. I can easily show/hide elements and trigger scroll in native .js, but have been struggling (for several days) to do this with GSAP. I'm sure that a lot of GSAP newbies will find this helpful. Thanks! -
Hello, I'm pretty new at this and this is my first post so I'll try to be as clear as possible but bare with me please. The codepen attached is essentially what I want to do for this site in terms of functionality. I'm struggling with the menu portion because it is a horizontal website and I can't just add the ids to the href. I tried using scrollTo but I haven't had any luck so I'm wondering if someone can help me. The idea is to have the menu flow throughout all the sections in a sticky-like position. When you click on one of the menu links it sends you to the corresponding section regardless of where you are on the website. Right now I'm thinking scrollTo but I'm open to other methods/animations as long as it takes you to the particular sections which is what I can't figure out. I'd appreciate any help. Thanks!
-
I'm trying to apply this toggle to an animation sequence from the 3d Preview Demo #3 (shown below). I didn't put it on codepen cuz its only two snippets. I'm new to jquery and brand new to GSAP, I get the concepts and can develop my skills easily given I can find reference to the proper syntax per situation. But unfortunately, I've found very little useful syntax examples even in the most details docs, the demos on codepen are mostly amusing novelties that almost religiously exclude click events and there is no reference book on "Coding with Greensock" . . . and that leaves me with no way to learn but trial and error - or asking for help. Here is the toggle I used for a previous animation that is triggered by clicking the div id=#left var t = new TimelineLite({paused:true, reversed:true}); t.to(".infoBar", .5, {ease:Back.SlowMo,top:"30%",}); $("#left").on("click", function() { if (t.reversed()) { t.play(); } else { t.reverse(); } }); I have tried for hours to apply it to the animation below, but when code requires exactness down to the dot, there seem to be more variations than the Rubik's Cube. If someone could show me how they would apply the click event above to the demo animation below - as well as advice on figuring out situational syntax when there are no references or examples - I would greatly appreciate it... 3D Preview Demo #3 : $(function() { var box = $(".box"); var wrapper = $(".wrapper"); var tl = new TimelineMax({repeat: 6, yoyo: true, repeatDelay:.5}) tl.set(box, { css: { borderRadius: 8, transformOrigin:"50% 0% -400px" } }); tl.set(wrapper, {css:{perspective:800}}); tl.staggerTo(box, 3, {css:{rotationY:360, autoAlpha:1}, ease:Back.easeOut}); }); HTML if it is relevant: <div class="wrapper"> <div class="box">ANIMATE</div> <div class="box">IN </div> <div class="box">3D</div> <div class="box">WITH</div> <div class="box">GSAP JS</div> </div>
