RyanHerbert
Recent Profile Visitors
1,684 profile views
RyanHerbert's Achievements
8
Reputation
-
Fantastic thank you Carl -
I'm having a few problems getting the animation to reverse back to the origianl state when the mouse is moved. Currently the code just snaps back to the icons original state.becomes a bit jumping when you have multiple aniamtions on each page. Is the away so that when the mouse is removed either the animation finishes out the sequence or is reversed back to the original state. (istead of snapping back Kind regards, Ryan
-
Perfect thank you Dipscom
-
I've created a series of animated icons. See in the codepen. on the end of the timeline i have added a tween to ramp the speed up as the timeline progresses. var NUM6Timeline = new TimelineMax(); NUM6Timeline.staggerFrom(".SET6>g", 0.7, { opacity:0,}, 0.15) .from(".top6", 2.4, {x: '-22%', y: '22%', opacity:1, },0.0) .from(".shd6", 6, { opacity:0}, 0) .from(".sticker", 1, {transformOrigin:"50% 50%", scale:0, opacity:0, ease:Back.easeOut },2.2);TweenLite.to(NUM6Timeline, 2.5, {progress:1, ease:Power2.easeIn}); Because the end tweenlite is not part of the timeline when I come to repeat the timeline, i lose the tween light. Could someone help me nest NUM6Timeline in a new timeline so I can include the progress tween. This master timeline I should then be able to loop on my page and included the ramped up animation. Kind regards, Ryan
-
Thank yopu carl this sounds like some excellent support. I'm going to also be adding a scroll function so just tring to get my head around how this all fits together ... this is my holy grail haa http://waaark.com/vision/ thank you ever so much for your support
-
Thanks Dipscom. Really appreciate the help. Only been doing this a week, learnt loads from your help but getting a bit swamped. trying to rebuild this with my designs. http://waaark.com/vision/ I have this working but I need each number animation to play when a point is clicked or a progress is scrolled to http://codepen.io/Ryan84/pen/aBBVWg I created each number animation like http://codepen.io/Ryan84/pen/zooKZK Just struggling making each number timeline player when a point is clicked or a progress it reached on the circle timle. going to be a long night ha.
-
Ah Perfect thank you Dipscon thats great. I saw this on your Codepen earlier..http://codepen.io/dipscom/pen/XNdKmm very inspirational. I'm and animator working with traditional forms or software like AE that has a timeline. it is refreshing to see the level of creativity an fluidity to animations produced with code. I'd like to learn more. Thank you
- 5 replies
-
- 4
-
-
- tweenmax
- timelinemax
- (and 2 more)
-
Hi, any help would be great right now. http://codepen.io/Ryan84/pen/aBBVWg?editors=1010 I don't want to fade on the numbers but instead run a timeline I have built for each number. these are included in the JS. They look like this: 1 http://codepen.io/Ryan84/pen/zooKZK?editors=1010 2 http://codepen.io/Ryan84/pen/JbbRXE 3 http://codepen.io/Ryan84/pen/xRREVR 4 http://codepen.io/Ryan84/pen/qqqaNr 5 http://codepen.io/Ryan84/pen/MbbjjW 6 http://codepen.io/Ryan84/pen/XNNjNd?editors=1010 At the moment when point 1 is clicked im saying fade on number one and hide all others. Ideally I want this to run when clicked:(instead of a fade on) var NUM1Timeline = new TimelineMax({paused: true}); NUM1Timeline.staggerFrom(".SET1>g", 0.8, { opacity:0,}, 0.18) .from(".top1", 2.4, {x: '-22%', y: '22%', opacity:1,},0.0) .from(".shd1", 6, { opacity:0,}, 0) .from(".blk10", 1, {transformOrigin:"50% 50%", scale:0, opacity:0, ease:Back.easeOut },2.2);TweenLite.to(NUM1Timeline, 3, {progress:1, ease:Power2.easeIn}); Any help would be really appreciated. Kind regards, Ryan
-
I've added some code to allow the timelne start slow and end fast. I want to put this on a master timeline with others. If you uncommnet out my Master timeline you will notice the time line tween no longer takes effect TweenLite.to(NUM1Timeline, 3, {progress:1, ease:Power2.easeIn}); I 'm clearly doing something wrong as this is not adding to the master timeline as I would like. any help would be much appreciated Ryan
-
I'm having trouble sequencing multiple timelines. I don't want the the second timeline (NUM6Timeline) to be visible till layer 1 has complete. I need to do this on 6 timelines but have just included 2 timelines in this codepen. ideally I would also like to fade out timeline1 before the next happens. When I try with 6 I get in a right mess and not having much luck with 2 either.. any help would be much appreciated. I've noticed i also lose the the ease on the second timeline (NUM6Time) so the animation loses its gradual build up regards, Ryan
-
Sorry Dipscom, just worked this out. Thank you for you help. Just adding >g to the Class in the timeline worked a treat. http://codepen.io/Ryan84/pen/ZBpXbX Thank you
-
Thanks for the advise Dipscom. Are you saying to change the .ST1 and .ST2 to .SET1? I was hoping to avoid this as I have 6 number groups each containing the more than 12 .ST2 .ST1.... for efficiency I was wondering if it is possible to leave these as they are and Target the group they are in. You mentioned "a CSS selector to target the children of .SET1." is this different from manually changing every layer to SET1? Thanks for the help..really appreciate it
-
I'm trying to make this: http://codepen.io/Ryan84/pen/MbjEZX?editors=1000 but instead of using .st1 and .st2 in the .staggerFrom I would like to combine these into one class called .SET1 .st1 and .st2 are in a group and I have added a class to this <g id="SET1" class="SET1"> the .staggerFrom doesnt seem to like .SET1 Can anyone see why? Kind regards Ryan
-
Tween to and from progress of a timeline upon click and scroll function
RyanHerbert replied to RyanHerbert's topic in GSAP
Really appreciate your feedback Jack. this is fantastic thank you ever so much for taking a look.- 4 replies
-
- 1
-
-
- timelinemax
- progress
- (and 4 more)
-
Tween to and from progress of a timeline upon click and scroll function
RyanHerbert replied to RyanHerbert's topic in GSAP
if Anyone could point me in the right direction i'd be so grateful, Kind regards, Ryan