Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by phillip_vale

  1. Nice one, thanks so much.

    Ok gotcha! And the data-link is the same as the class! i.e. data-link=".one"


    Just a few further questions sorry:


    - Can i change the order of the menu closing? i.e. The menu closes and then scrolls to the relevant section.

    - If i open and close the menu without clicking on a menu link the browser won't scroll.

    - Once the menu item is clicked the nav loses it's fixed position.


    Again, thanks for all the help.






  2. That's perfect! Thank you.

    Just a question, how does it know which section to go to?


    Also, do you know how to 'close' the menu once a link is clicked? i.e. Reversing the menu opening sequence with the 'burger' to 'cross' animation.
    Would this need to be in a timeline?

  3. Hi!


    New Shockingly Green member and diving in the deep end with ScrollTrigger and Scroll Smoother amongst other things.

    I'm trying to create a burger menu that opens up a nav, reveals a link and then once clicked closes the menu and scrolls to the corresponding section.


    All good so far with the burger animation and the scroll trigger square in section three.

    I'm just a bit stuck adding the menu link and integrating the scroll smoother action.


    Sort of like the 'Jump to C' button behaves in the ScrollSmoother example.


    See the Pen KKXZOyZ by GreenSock (@GreenSock) on CodePen


    Thank you, any help is much appreciated.




    See the Pen QWBwdQq by phillipanthonyvale (@phillipanthonyvale) on CodePen

  4. Hi everyone,

    I have tried to create a lightbox style Greensock animation complete with a Youtube embed.

    Only thing i am having trouble with is when i hit the CLOSE button the video keeps playing.

    From what i can tell reading forums the Youtube API changes frequently. A recent post i found mentioned to included the following in the closing code:


    $('#moviePlayer').each(function(){this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')});


    As well as adding enablejsapi=1 in the iframe of the actual embed.


    Any help is much appreciated.


    Phil Vale

    See the Pen KKReXRW by phillipanthonyvale (@phillipanthonyvale) on CodePen

  5. Hi,


    I have a div with changing .gif backgrounds working but when i run it on a live site the gifs glitch or don't play because the gif aren't preloaded i'm guessing.


    To break what i'm trying to achieve into steps it would look like:


    1. Loading animation (3 squares fading in) while gifs are preloading.

    2. Loading of gifs completes and loading squares finish with all three visible.

    3. #main div fades up with preloaded gifs playing.


    Any help is much appreciated, thank you.



    See the Pen jOzMNry?editors=0010 by phillipanthonyvale (@phillipanthonyvale) on CodePen

  6. Amazing, thanks so much Cassie!


    Just a quick question. What happens to the gifs when they aren't showing are they still playing in the background?


    OR does the .set function sort of turn them off?

  7. Hi,

    I'm trying to get a background image .gif to change from one image to the another.

    I want the animation to change from Homer to Leo and repeat endlessly.


    I'm just after a straight cut in the transition so i thought .set would do it rather than a .to or .from with opacity etc.


    Thanks for the help,


    See the Pen jOzMNry by phillipanthonyvale (@phillipanthonyvale) on CodePen

  8. Hi everyone,


    Just trying to get a simple 3 frame animation happening with this dancing girl as an example to be used in an MREC.


    It's working perfectly except for the end of the animation where it flickers off.


    I would like it to play all 3 frames and then return to the start to play again.


    Any help is appreciated!


    Thank you.

    See the Pen GbmBZR by phillipanthonyvale (@phillipanthonyvale) on CodePen

  9. Hi there,


    I am trying to have a loading circle play until the other content on the page has loaded (mainly an iframe displaying vimeo).


    Once that happens the loading circle should fade, the logo play and the vimeo iframe begin.


    Any help would be greatly appreciated!



    See the Pen NdpprQ by phillip_vale (@phillip_vale) on CodePen

  10. Hi Dipscom,


    Thank you so much for your help.


    The end result will hopefully use alot more greensock once it is on a website and i would like to eventually have the videos scrolling through once the lightbox is open so this is awesome help.


    I was hoping to use divs as the links though. Is this impossible because we need the child nature of a list? 


    This is probably moving away from a greensock forum now but is there a way to match up the amount of .item divs to the videos?


    Is this where i would start?


    var x = document.getElementsByClassName("example");





  11. Thanks so much for all the input. I was asleep while all of this was happening! I probably could have described it better, i was talking about a flicking not a flickering and the snapping is a much better description. All of these posts are brilliant. I might push further in the project and post again soon. Thanks all, Phil

    • Like 1
  12. Hi all,


    Trying to animate a line between 2 random points inside a circle using drawSVG. That is the end result i am hoping for.


    But this is a learning experience so doing it bit by bit.


    However, i am now stuck. I can make the points appear (currently limited to 2) but would like to animate them in on the pointsTL timeline rather than using the pointer.appendTo("#circle").fadeIn(x);.


    I put an example in the top left to show what i am trying to achieve but happy for direction to get back on track at the moment in terms of setting up the gsap timeline.


    Any help is appreciated!



    See the Pen beerNe?editors=0011 by phillip_vale (@phillip_vale) on CodePen

  13. Hi,


    I am trying to make a counter. The namings might seem a bit weird but they are specific to another project that this is for.


    Basically, once it is in it's final place the activeIndex will be determined by a slider.js that i have running.


    Once the activeIndex == 1 or 2. it should set a number 49 or 70 that the count() function will count to.


    Any help would be great!





    See the Pen zBGLzy?editors=0011 by phillip_vale (@phillip_vale) on CodePen

  14. Hi CraigWheatley and Point C,


    Thanks for your input! I'm going to stick with the jquery method because I have about 16 icons all up!


    Point C thanks for you help, just one thing do you think you could explain what the (function(i, element) means? The rest i can sort of understand but i don't see what the i after the function does.





  15. Hi PointC!


    Thanks for this. Works a treat!


    Except when i try to use it in my files on my desktop it doesn't seem to want to work. This happens to me alot when i copy code from greensock and into my files.


    Is there some structure or heirachy that i am missing?


    I stops working when i use it in the /js/script.js file but works fine if i put it on the bottom of the home page?


    Thanks so much,