Jump to content
Search Community

RyanHerbert

Members

  • Posts

    16

  • Joined

  • Last visited

 Content Type 

Posts posted by RyanHerbert

    Hover animation which reverses back to original state when mouse moves away

    in GSAP

    Posted

    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

    See the Pen ZBqrjZ?editors=1010 by Ryan84 (@Ryan84) on CodePen

    Ramp up speed of a timeline

    in GSAP

    Posted

    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 

    See the Pen XNNjNd?editors=1010 by Ryan84 (@Ryan84) on CodePen

    Adding ease to timeline progress

    in GSAP

    Posted

    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

    See the Pen aBBVWg by Ryan84 (@Ryan84) on CodePen

     

    I created each number animation

    like

    See the Pen zooKZK by Ryan84 (@Ryan84) on CodePen

     

    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.

    Adding ease to timeline progress

    in GSAP

    Posted

    Ah Perfect thank you Dipscon thats great.

    I saw this on your Codepen earlier..

    See the Pen XNdKmm by dipscom (@dipscom) on CodePen

     

    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

    • Like 4

    Timeline click to trigger animation

    in GSAP

    Posted

    Hi, any help would be great right now.

     

    See the Pen aBBVWg?editors=1010 by Ryan84 (@Ryan84) on CodePen

     

    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

    See the Pen zooKZK?editors=1010 by Ryan84 (@Ryan84) on CodePen

     
    2

    See the Pen JbbRXE by Ryan84 (@Ryan84) on CodePen

     
    3

    See the Pen xRREVR by Ryan84 (@Ryan84) on CodePen

     
    4

    See the Pen qqqaNr by Ryan84 (@Ryan84) on CodePen

     
    5

    See the Pen MbbjjW by Ryan84 (@Ryan84) on CodePen

     
    6

    See the Pen XNNjNd?editors=1010 by Ryan84 (@Ryan84) on CodePen

     
     
    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 
     
     
     

    See the Pen aBBVWg?editors=1010 by Ryan84 (@Ryan84) on CodePen

    Adding ease to timeline progress

    in GSAP

    Posted

    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

    See the Pen BQQBya by Ryan84 (@Ryan84) on CodePen

    Timeline nesting issue. Timeline to start/visible when previous completes

    in GSAP

    Posted

    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 

    See the Pen BQQBya by Ryan84 (@Ryan84) on CodePen

    .staggerFrom a .class made from an SVG group

    in GSAP

    Posted

    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

    .staggerFrom a .class made from an SVG group

    in GSAP

    Posted

    I'm trying to make this:

    See the Pen MbjEZX?editors=1000 by Ryan84 (@Ryan84) on CodePen

     

    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 

    See the Pen ZBpXbX by Ryan84 (@Ryan84) on CodePen

    Tween to and from progress of a timeline upon click and scroll function

    in GSAP

    Posted

    Hello all,

     

    I have a slight problem and any help would be greatly appreciated, I am an animator new to the world of code and greensock.

     

    I'm looking to build something similar to the visions section on this waaark site: http://waaark.com/vision/

     

    As you can see from the code pen I have built the outer circle forming and have built a timeline with a slider to controll the progess of the outer circle. I have managed to link each point so that when it is clicked the timeline go to the corrrect progress.

     

     

     

    ideally I would Like this to tween to the correct progress and not jump as it is currently downing. I've tried a tweenTo() put cant seem to get this to function.

     

    The box2Timeline also should not animate the full way through as it currently does but function like waaark

     

    once this is fixed I'm going to also add a scroll function and then a inner icon to animate on when the corresponding point is clicked.

     

    Any help would be greatly appreciated.

     

    Kind regards,

     

    Ryan 

    See the Pen rWLNLN by Ryan84 (@Ryan84) on CodePen

×
×
  • Create New...