christopherduffy
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by christopherduffy
-
-
-
Thanks for all the responses, the previous method worked for me.
This is what I was trying to make.
See the Pen xPPEMg by christopherduffy (@christopherduffy) on CodePen
- 2
-
Hi,
I'm trying to make an element tween from off screen and land on a point while scaling down.
I currently have the element scaling down and moving position but I don't want it to start scaling down until it gets closer to the red box.
Any advice or guidance would be great.
See the Pen gXogbV?editors=0010 by christopherduffy (@christopherduffy) on CodePen
-
The combination of killTweensOf() and set() worked.
Problem solved.
- 2
-
That is the issue. I am only using two tweens, active and idle, in order to reduce the amount of code needed.
At the moment a combination of killTweensOf() and set() to reset the position seems to be working in my demo. I will try applying this to my main project after work tomorrow.
If this doesn't work I will try your method of creating individual tweens.
Thanks for the advice Sahil.
-
Thanks for the response. I'll keep future demos on point.
The issue is that I need to pause a tween on a specific element while the other elements using the same tween continue, which .seek() doesn't allow.
-
Hi, this is my first forum post and I'm hoping to get some help with an issue and learn more about GSAP.
The project I'm working on is replicating a video game character select screen where the user can navigate through 3 characters (using the left and right arrow keys) which have idle animations until selected where an active animation will play on the selected character. I am doing this by using sprite sheets and SteppedEase in TweenMax.
I have the navigation and idle and active animations on document ready working. The problem I am having is when switching to the next character. The way I believe it should work (with limited knowledge of GSAP) is to kill the idle animation on the element that's to be selected and return its progress to 0 before adding a new active tween to the element. The main issue at the moment is I cannot seem to kill the animation of the specified object. I have tried using TweenMax.killTweensOf() but this does not reset the progress and when the active tween is added it starts on the frame from which the idle animation was killed.
I have recreated a demo with basic sprite sheets (note: there may be an initial delay in loading the sprite sheets in CodePen because I am using Dropbox as a makeshift CDN) and labeled the code I am having issues with with the comment "start here". There are two areas with this comment, one for killing the active tween and one for killing the idle tween.
What I am asking for specifically is help in killing and pausing (pause(0)) the tweens in question.
The way you will know if this works is if you wait until the sprite sheet in the boxes are at a stage past "1" in their images and then navigation to another box, the sprite sheet of the box you navigated away from should return to the first stage which should display the number "1" and stop the tween, the box you navigate to should also return to the first stage and stop the tween, the 3rd box should continue its tween.
I hope this doesn't read like an essay but I wanted to try and give as much detail as possible on what I need help with and what I've tried so far.
Again any help / guidance will be appreciated as I've been banging my head against my keyboard for the past few days.
Thanks
See the Pen ooWGrL?editors=0010 by christopherduffy (@christopherduffy) on CodePen
DrawSVG Interlocking Letters
in GSAP
Posted
Thanks to everyone who replied. I'm looking forward to investigating those codepens.