Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by phillip_vale

  1. This is perfect! thanks so much for all of your help Jack & Rodrigo!
  2. 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. Cheers, Phil
  3. 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?
  4. 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. https://codepen.io/GreenSock/pen/KKXZOyZ Thank you, any help is much appreciated. Cheers, Phil
  5. Thanks @mvaneijgen, still a bit of a newbie i'm afraid so really appreciate the help and advice.
  6. 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. Cheers, Phil Vale
  7. Thank you so much for the help Jack. I have a lot to learn.
  8. 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. Phil
  9. 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?
  10. 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, Phil
  11. Oh man, thank you Jack. So i only need the x: -600 because i don't need to count the first frame. And i don't count the first step so the config is (2).
  12. 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.
  13. 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! Phil
  14. 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"); Cheers, Phil
  15. Hi, Is there a better way to do this? I want to load about 15 different videos all up for a portfolio type site. Any help is appreciated. Thanks, Phil
  16. 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
  17. Hi there, I am trying to make 3 divs fold out from under one another and was going quite well until i noticed that the divs are sort of flickering when they get to the end of their transitions. Any help is appreciated! Thanks, Phil
  18. 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! Phil
  19. 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! Thanks, Phil
  20. 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. Thanks, Phil
  21. Hi, I am having a problem animating multiple icons with all of them hovering at once. I have tried each() etc. but can't seem to crack it. Ideally I would like to have it that on hover the timeline iconHover plays and then reverses when the mouse is taken off. Any help would be much appreciated, Phil
  22. Sorry i think i fixed it. My script.js was loading before my jquery. Thanks again!
  23. Sorry i think i fixed it. My script.js was loading before my jquery. Thanks again!
  24. 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, Phil
  25. Not sure if this is nested timelines but this is what I was after if any other beginners can use it. http://codepen.io/phillip_vale/pen/rLVMaB?editors=0010