Jump to content

Search the Community

Showing results for tags 'onclick start animation'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 2 results

  1. 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!
  2. 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>