Jump to content

Ihatetomatoes last won the day on August 8 2016

Ihatetomatoes had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Ihatetomatoes last won the day on August 8 2016

Ihatetomatoes had the most liked content!


147 Specialist

About Ihatetomatoes

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

6,377 profile views
  1. I have ported the Sublime Text snippets to VSCode extension. If you are switching to VSCode, simply search for GreenSock Code Snippets in the marketplace. It works exactly like the Sublime Text snippets, all credit goes to Carl. Enjoy!
  2. Hi Fernando, you have to target the individual paths inside of the SVG instead of the SVG itself. Here is the updated CodePen: http://codepen.io/ihatetomatoes/pen/e3d7fc0fcc29b80c115fc7e6d4be97a3/ Also note that I have set the TO value to be "100%" instead of 100, because the length of each letter is different. 100% will always animate the path to the full length. Hope that helps.
  3. Have a look at this CodePen demo, you can use similar approach and move the cloud back to the start when it goes outside of the parent. http://codepen.io/GreenSock/pen/QEdpLe Hope that helps.
  4. @swampthang, great to see that you've made your almost beta. And thanks heaps for signing up to my workshop! You are awesome!
  5. If you manage to isolate the issue into a reduced CodePen demo, I am sure we can point out what is wrong with your code. At the moment it looks like too many plugins are affecting the layout of your page and it could be any of the other plugins causing the issue. Try the delay as you suggested, but I doubt it will help. Sorry I couldn't be more helpful. And you English is perfect, no need to apologize
  6. Hi swampthang, I think you have a few options to create this. Check out this video by Chris Gannon where he explains how to animate a gradient: Create a Looping Gradient Using SVG Filters & Patterns Maybe that technique might help. Or you can setup multiple element and animate them separately like I did on this Google logo animation. Let us know which technique you have used for the effect. Thanks Petr
  7. Hi nofpowerlls, can you be more specific what and when is freezing (which browser/OS etc.)? One think I would suggest if you want to get the best performance is to use absolute position in your CSS. http://codepen.io/ihatetomatoes/pen/bf5232f100eb5505cacb8fce5450a189/ You can also create a single timeline and include all you tweens on it, instead of using delays for all your tweens. This GreenSock TimelineLite Tutorial explains how to use GSAP timelines: Hope that helps. Cheers Petr
  8. Hi PonyBoy, the animation works fine when it's loaded in an iframe: http://codepen.io/ihatetomatoes/pen/17aa3c40c9107e9266e10464c3221116 Try to disable the slider that you are using or add your iframe to the first slide and see if the animation is still slow. You have definitely quite a lot going on on that page, but this might help with isolating the issue. Cheers Petr
  9. Here is the scene with the reverse set to false: http://codepen.io/ihatetomatoes/pen/c81e9f7f2acb87c26f856e1f75212f29/ Sounds like you have to create two scenes, one will trigger the animation + scrollTo and one that will only trigger the animation.
  10. Hi Ritch, have you tried to add reverse: false to the Scene options? ScrollMagic.Scene({ triggerElement: '.trigger', triggerHook: 'onLeave', reverse: false }) .addIndicators() .addTo(controller) .setTween(menurb); This should only trigger your animation once. Hope that helps.
  11. Thanks Beck, great to hear that the answer was useful and thanks for the nice words about the content of my courses. If you have any other GSAP questions feel free to ask here or reach out directly. Speak soon. Petr
  12. Hi Beck, great to see you are implementing GreenSock into a real life project. TYPO After quickly looking at your code, I realised that you have misspelled transformOrigin for transformOrgin, that is why your transforms are not behaving the way you want. You will need to fix the typo and set the default value for the #top to be the bottom of the element, currently it is set to '0% 0%' which is the top of it. Also remember, once you change transform origin on an element, you don't have to declare it again on the future tweens, unless you want to change it. In your case you should set it to "100% 100%" in the clearTl function and that's it. http://codepen.io/ihatetomatoes/full/4dae4dfd0fafc9fa970ef251a3105e27/ TIMING My suggestion is to tweak the timing of your animations, at the moment it feels like the whole graph is animating in for too long. In high level I would start by animating 3 groups of elements: the graph axis with labels the TIMES PAST and POWERTOOLS arrow the text This might be harder to explain, but one thing that helps me when creating the animation flow is to animate elements that my eyes are looking at, followed by elements near by. In your case when the TIMES PAST animates then the TEXT animates, which is quite far from the previous element that my attention was drawn to. I really think that you only have to tweak to a few things to make this graph stand out even more. Hope that helps Beck and thanks again for signing up. Cheers Petr
  13. Hi Richard, here is the promised video: Let me know if you have any other questions, hope it helps. Cheers Petr
  14. Hey Richard, I think I know what you mean. I will create a short video explaining how to setup "universal" tweens that can be used for dynamically generated content. I am almost done with the video, just need to complete the editing. I will publish it on my YouTube channel and post it also here. Stay tuned.
  15. Hi Alvaro, which syllabus are you referring to? GSAP WorkBook or GreenSock Workshop? I've update the GreenSock Workshop page with a detailed table of content.