Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Ihatetomatoes last won the day on August 8 2016

Ihatetomatoes had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Ihatetomatoes

  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.
  16. Hi Alvaro, great to see you experimenting with GSAP. Which of my tutorials have you followed? I've only quickly looked at your code and see a few errors: function goToTile(sildeIn, slideOut) // should be slideIn, also you have tl twice in that function // also I would include var in front of slideIn var slideIn = ... My suspicion is that the way you are passing the slideIn into the goToTile function is returning wrong object on a second click. Try to console log this and see if it returns the right object all the time: slideIn = slideOut.parent().children('.view').eq(index); Sorry I couldn't help more atm, but I hope it steers you into the right direction.
  17. Hi cweber105, welcome to the forums and great to hear that you are digging GSAP, you are not alone Posting a CodePen demo would help tremendously, here is a quick guide. The direction in which the strokeDashOffset is animated depends on the direction it was created in Illustrator, that's just my initial guess without seeing anything. Post a CodePen and we can look closer.
  18. Hi Sophia, your English is better than mine Could you create a simple CodePen with the animations that you're trying to recreate? That would help.
  19. Forgot to mention that to get closer to the original CSS animation I increased the timeScale of the timelines instead of tweaking the times of the individual tweens. tl.timeScale(1.8); tlMove.timeScale(1.8);
  20. Hi Sophia, You are correctly creating a timeline for the first CSS animation, you just don't need to position these tweens absolutely. var timeline = new TimelineLite(); timeline .to(element, 0.5s, {backgroundColor:red}) .to(element, 0.5s, {backgroundColor:yellow}) .to(element, 0.5s, {backgroundColor:green}) .to(element, 0.5s, {backgroundColor:black}) They will naturally play after each other. And your second question might have a few answers. 1. You can overwrite a default ease Power1.easeOut at the top of your js file. TweenLite.defaultEase = Power3.easeInOut; All tweens would then by default use this easing. 2. You can create another timeline that controls a movement of your elements. var tlMove = new TimelineMax({repeat: 4}); tlMove .to($elGSAP, 0.3, {x:-10, ease:Power1.easeOut}) .to($elGSAP, 0.6, {x:10, ease:Power1.easeInOut}) .to($elGSAP, 0.3, {x:0, ease:Power1.easeIn}); And use the right easeOut, easeInOut and easeIn combination. 3. You can create a single tween that would control a progress of the timeline, that would be paused by default. TweenMax.to(tlMove, 4, {progress: 1, yoyo: true, repeat: -1, ease:Power1.easeIn}); The easing specified in this tween will be used for the whole tlMove playback. Hope that answers your question or gives you a few options to create the animation you are after. Here is a CodePen that you can play with. Cheers Petr
  21. I have put together a compilation of 11 short videos with quick demos explaining the basics of GSAP API to a complete beginner. If you just staring out with GSAP this might be a good place to start. Go To GreenSock 101 Happy tweening. PS: If you happen to sign up and go through the free course, please let me know what you think about the content. Your feedback is very valuable.
  22. I have been looking at the trends on the award winning websites and reported the results in this article and video. I still continue to review these trends and will publish a summary of 100 sites of the day sometime in April. Here are some of the top sites using GreenSock for your inspiration or just to kill some time at work:) Adidas Ace 16 Publicis90 Jetlag Photos Concrete LCDA Tati Express Epicurrence No. 3 Around the World in 12 Dishes Control Films Sailing with Greenpeace Have a great day/night/weekend.
  23. Not tested with GreenSock scrollToPlugin, but these two plugins can customize the look and feel of the native scrollbars: nanoScroller.js - a jQuery plugin for implementing Mac OS X Lion-styled scrollbars Perfect Scrollbar - Minimalistic but perfect custom scrollbar plugin Cheers P.
  24. Hi @jstafford, I have recently worked on an Angular project and hooked into some of their classes for fading in and out. .item { transition: opacity 0.2s linear, visibility 0.2s linear; } .item.ng-enter { opacity: 0; visibility: hidden; } .item.ng-enter.ng-enter-active { opacity: 1; visibility: visible; } .item.ng-leave { opacity: 1; visibility: visible; } .item.ng-leave.ng-leave-active { opacity: 0; visibility: hidden; } I wouldn't include GreenSock in your project if you only want to fade things in and out. Hope that helps.
  25. Thanks for the music feedback everyone. Q: How many days did it take you to make that? A: 3 weeks from start to finish (4 days/week) The 3 weeks included: - front-end coding, plus a few hours or cleaning up and setting up the artboard in Illustrator - a few feedback rounds and tweaking the animation based on user feedback - recording, editing of the video - playing with different styles of fireworks explosions (2-3 days), way too much time but it was fun All in all I am happy with the result and definitely learned a few new things about GSAP, SVG and animation. More tuts and demos based on this animation to come on my blog and YouTube channel.