Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Contact Methods

Profile Information

  • Gender
    Not Telling

Arun's Achievements


Newbie (1/14)



  1. First of all, Sorry if I'm spamming this forum by showcasing my side project. Admins, please delete my post if it's not the right place. I'm not a pro in making tween and after completing this side project, I have seen huge scope of improvements. I'm still learning and GS forum has helped me a lot during the making of this tween. This short animation is dedicated to my daughter because she just love this FoxLife SoundTrek TVC I'm open to any suggestion and improvements. Thanks to all in this forum who helped me in making this. Please enjoy this or kindly ignore.
  2. Hi @PointC, Highly appreciate your help on this. This was an eye opener to what all GSAP can do when I'm "really trying hard :)" to make things done. As far as the objective of the project goes, I'm trying to use the emoji SVG's provided by http://emojione.com/ as-is and not to modify them. That was the reason, I used all these existing emoji svg's which gives me all hourly times instead of modifying the svg(I didn't know that it can be done untill you showed me ). Your intention to animate the clock as naturally as possible was perfect, but the project require something like this: https://drive.google.com/file/d/0B90SBTqxxkRBekRJNU9SZ3ZIOEE/view. (actual required output) As seen on the video clip, the minute hand stays at 12 and only the hour hand rotates. I could modify the svg and your code, that helped me to achieve 3 loop of hour hand rotation. Please see the new pen. http://codepen.io/nudgepixels/pen/aNQNda But then, I want 3 more steps before the animation completes ( i,e,1, 2, 3 hours - as highlighted in yellow in the frame chart below or on the video clip). How do I do that? https://drive.google.com/file/d/0B90SBTqxxkRBT3VRMkZlektiQk0/view (frame chart) This is the part I was stuck originally as well, how to join another stagger tween(1,2,3 hours) along with the loop. Overall, I'm really happy what I'm learning from this support forum, unlike any other forums I interact, you guys really reach out to us with great solutions and insights into scopes of GSAP. Great Job, guys!
  3. I have created two pens as I cannot combine both in the same pen example to explain my issue. Pen1 (part 1) https://codepen.io/nudgepixels/pen/dMgxKg The clock ticking tween repeats for 3 times as seen on the pen. Pen2 (part 2) https://codepen.io/nudgepixels/pen/PNyMaM At the end of my pen 1, I want Pen2 to follow without any delay. My objective is to join these two pens. (And at the end, I will have to join this single pen to my main project - i.e, https://codepen.io/nudgepixels/pen/XdRVdP - I will handle this part) As you can see, for the clock loop tween, I'm using a new variable - var time = new TimelineMax . . time.staggerTo(".clock", 1.04, {display: 'block'}, 0.25) .to(".clock", 0, { display: 'none'}); which is different from my main variable - var tl = new TimelineMax(); . . tl.staggerTo([frame274_12a, frame274_1, frame274_2,frame274_3], 0.32, {display: 'block'}, 0.25) My main project is based on 'tl variable. For some reason, I cannot loop and join the second tween (Pen 2) using the same timeline variable. This looks simple, for some reason, none of my solutions are working. If this can be achieved, it would help me to apply similar solution to other animations. Kindly help me on this.
  4. I'm someone from India, so beware . Sorry to see @OSUblake for having such a perception on Indians. Its my 3rd week and countless hours trying my hands-on with GSAP and such a wonderful forum. Even though I'm very new to scripting, I think, I'm learning Js through my experiments with GSAP(and threejs). In these many hours, I haven't thought of copying any code for my personal benefit. Hope this helps you to change your perception about Indians. Cheers.
  5. Hi PointC, StaggerTo is definitely a better way of doing it and thanks for showing me how to use this method. I'm currently implementing the project using StaggerTo and rearranging/grouping div's to match the frame-timeline. I don't know if you have noticed it in your codepen demo, when using StaggerTo, the method is omitting the first child div under the parent dmdAnimation div. I tried to fix it but its not working. Any suggestion how to fix this? Thanks again.
  6. Hi, I'm having bit of a challenge to understand how to use Frames(or is it right thing to use) in a crazy animation project. The codepen url will give you an idea to the part of my problem that I'm trying to solve. Here I'm using emoji icons lined up one after the other to animate the first 3 seconds of this 49 second video. My project is to recreate the video using GSAP and emoji icons. In this time-frame (3 seconds), I have got 19 icons to animate and all of them appear at varying rate in this time frame as you can see in the first 3 second of the video. Right now I've give 0.5 second time for each icons. My question is, how should I approach my solution to produce exact reproduction of the video? If using frames instead of seconds, how do I implement it with my current solution. I appreciate any suggestion and help on this.