Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by PinkMeNow

  1. Is it possible to add pause between each staggered element in stagger. Each element is supposed to appear and fade and don't appear. I want each element to fade after previous one has appeared and faded away and not to appear until whole loop starts again.


    TweenMax.staggerFrom(".line11", 0.3, {opacity:0, ease: Expo. easeIn, yoyo:true, repeat:-1}, -0.59);


  2. I have a click button that after click sends calendar entry to the user.

    What I'm trying to achieve is that dot in the middle scales up over letter radius on mouse hover.


    I've tried several approachesnow but for some reason I cannot do it.


    This is my code:

    TweenMax.to(".innerletters, .outerletters, .roundbutton", 8, {opacity:1, delay:7});
    TweenMax.to(".innerletters", 32, {css:{rotation:-360, transformOrigin:'50% 50%'},ease:Linear.easeNone,repeat: -1,paused: false});
    TweenMax.to(".outerletters", 22, {css:{rotation:-360, transformOrigin:'50% 50%'},ease:Linear.easeNone,repeat: -1,paused: false});
    function hoverOn () {
    var ttt = new TimelineMax({repeat:-1});
    ttt.to(".roundbutton", 2, {fill: '#F15D2E'})
    ttt.to(".roundbutton", 2, {fill: '#EEBC27'}, "+=1")
    ttt.to(".roundbutton", 2, {fill: '#8DC641'}, "+=1")
    ttt.to(".roundbutton", 2, {fill: '#F15D2E'}, "+=1")


    See the Pen XOzWGv by drol (@drol) on CodePen

  3. I'm trying to scale up specific path from SVG graphic. It's not working so I may be missing something.


    Path definition

    <symbol id="dot"><path id="smalldot" class="cls-2" d="M104.9,36a3,3,0,1,1-3-3A3,3,0,0,1,104.9,36Z"/></symbol>



    TweenMax.to("#dot", 3, { scale: 5 });






  4. Greetings, I'm new to greensock/js so Im looking for little assistance here. What am I doing wrong?


    <div id="sidemenu" class="sidemenu">
    <a href="#registerhere"><strong>register here</strong></a>
    <hr />
    <a href="#whatisincludedinthefee"><strong>what is included in the fee</strong></a>
    <hr />
    <a href="#onedayattendance"><strong>one-day attendance</strong></a>
    <hr />
    <a href="#accompanyingpersons"><strong>accompanying persons</strong></a>


    defer(function () { });
    var $sidemenu = $('#sidemenu');
    TweenLite.from($sidemenu, 5, {opacity: 0, ease: Power4.easeIn});