Jump to content
GreenSock

Ihatetomatoes last won the day on August 8 2016

Ihatetomatoes had the most liked content!

Ihatetomatoes

BusinessGreen

  • Posts

    145

  • Joined

  • Last visited

  • Days Won

    3

 Content Type 

Everything posted by Ihatetomatoes

  1. Ihatetomatoes
    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
  2. Ihatetomatoes
    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
  3. Ihatetomatoes
    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
  4. Ihatetomatoes
    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.
  5. Ihatetomatoes
    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.
  6. Ihatetomatoes
    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
  7. Ihatetomatoes
    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
  8. Ihatetomatoes
    Hi Richard, here is the promised video: Let me know if you have any other questions, hope it helps. Cheers Petr
  9. Ihatetomatoes
    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.
  10. Ihatetomatoes
    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.
  11. Ihatetomatoes
    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.
  12. Ihatetomatoes
    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.
  13. Ihatetomatoes
    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.
  14. Ihatetomatoes
    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);
  15. Ihatetomatoes
    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
  16. Ihatetomatoes
    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.
  17. Ihatetomatoes
    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.
  18. Ihatetomatoes
    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.
  19. Ihatetomatoes
    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.
  20. Ihatetomatoes
    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.
  21. Ihatetomatoes
    Thanks Carl and Jack, I just realized that I haven't included a link to the short video from "The Making of the Happy New Year demo". It is completely irrelevant, but I am curious what do you think about the background music? It's custom made and I will be using in it in my future YouTube videos. Cheers Petr
  22. Ihatetomatoes
    A few days earlier I know, but I am off to the beach tomorrow. I wanted to say a big THANK YOU to the awesome GreenSock team. Thank you for all the new features, plugins and the incredible amount of work put into the GSAP tools that make our lives so much easier. Also a big thanks to everyone contributing to this forum for helping newbies and pros getting to know GSAP, brainstorming ideas and for simply being so helpful every time. https://ihatetomatoes.net/happy-new-year/ Happy new year. Petr
  23. Ihatetomatoes
    The GreenSock Workshop is today available for a 30% Cyber Monday discount. Signup today and save. Happy tweening.
  24. Ihatetomatoes

    Scrollmagic

    Ihatetomatoes replied to pedriveros's topic in GSAP

    Here's a Codepen unpinning the Section 3 and displaying the following content normally. http://codepen.io/ihatetomatoes/pen/QjRWGM/ This is the approach: - create new "unpin element" inside of Section 3 and position it at the bottom - create a new scene, that will unpin Section 3 - trigger this scene when "unpin element" comes into a view This will unpin Section 3, but both Section 1 and 2 are still pinned, that's why you have to also add white background to Section 3 and change background colors of Section 1 and 2 to white. Here's the updated ScrollMagic code: var scene; var controller2 = new ScrollMagic.Controller({ globalSceneOptions: { triggerHook: "onLeave" } }); var controller = new ScrollMagic.Controller({ globalSceneOptions: { triggerHook: "onEnter" } }); var slides = document.querySelectorAll("div.layer"); for (var i=0; i<slides.length; i++) { scene = new ScrollMagic.Scene({ triggerElement: slides[i] }) .setPin(slides[i]) .addIndicators() .addTo(controller2); } var unpinSlide = document.querySelectorAll("div.unpin"); var scene2 = new ScrollMagic.Scene({ triggerElement: unpinSlide[0] }) .addIndicators({ colorStart: "rgba(255,255,255,0.5)", colorEnd: "rgba(255,255,255,0.5)", colorTrigger : "rgba(255,255,255,1)", name: 'unpin' }) .setClassToggle(".bg-blue, .bg-red", "bg-white") .on("enter", function (e) { scene.destroy(true); }) .addTo(controller); Hope that helps.
  25. Ihatetomatoes
    Hi coco, I think I know what you're trying to do. All you have at the moment are separate tweens, but you should create a timeline instead. That would let you play a few tweens at the same time. Here's a tutorial on how to create a simple image slideshow,I think you can use a similar approach for your page transitions. Video: Related article: https://ihatetomatoes.net/greensock-tutorial-create-simple-image-slideshow/ Hope that helps. Cheers Petr
×
Login Create Account