Jump to content
Search Community

Any ideas for forcing an initial render for a tween inside a a 'click' event handler?

Vector test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I've spent quite a while on this trying different solutions, but not had any luck. Normally I'd place the timeline outside the click function and render it on page load, so that it doesn't suffer from that initial render lag. It's probably down to my lack of JS knowledge, but I'm really struggling to figure out how I can do this when I have more than one on the page (like in my example).


The code isn't very well optimised/bug free at the moment, but it's fully functional (in Chrome), providing you don't scroll down the page. Any help would be greatly appreciated, thanks.

See the Pen ZOpRMN by Luke87 (@Luke87) on CodePen

Link to comment
Share on other sites

I'm not sure I understand what you're saying? The click event is on .svg-container, and the element being animated is .mask, but only the one clicked on, which is defined by this:

var $thisMask = $(e.currentTarget).find('.mask');

N.B. Forgot to mention... I know about the reveal progress trick (below), but I can't see a way of implementing it with my current set up.

Link to comment
Share on other sites

You're animating the same property, on the same element, in 3 different events. This is what your code boils down to...

container.click(function() {
  TweenLite.to(circle, 1, { attr: { r: 900 }});
container.mouseover(function() {		
  TweenLite.to(circle, 0.1, { attr: { r: 450 }});
container.mouseleave(function() {		
  TweenLite.to(circle, 0.25, { attr: { r: 500 }});

See the Pen akWKow?editors=0010 by osublake (@osublake) on CodePen


You're most likey going to be overwriting something, so there's really no point in using a timeline unless you're animating the progress of that timeline in those events.

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...