Jump to content
Search Community

Ihatetomatoes last won the day on August 8 2016

Ihatetomatoes had the most liked content!

Ihatetomatoes

Business

  • Posts

    145

  • Joined

  • Last visited

  • Days Won

    3

 Content Type 

Everything posted by Ihatetomatoes

4
5
6
Page 5 of 6  
  1. Ihatetomatoes
    Hey violacase, it really depends on the concept of you animations and the effects you are trying to create. I wouldn't say lets use only Canvas or only SVG, both are suitable options. As a general rule I would choose SVG for any vector based effects, that can be created in Illustrator and then exported as SVG. Canvas might be more suitable for image sprites or more complex animations and would give you some performance benefits, but might be harder for debug in a browser. I don't have much experience with Canvas, but I like the SVG approach because of the more natural workflow - draw > export > animate. Hope that helps. Cheers Petr
  2. Ihatetomatoes
    Hey Phil, why not just position tweens on a timeline using the relative or absolute positioning? .from("#animation", 20, {left:990}) .from("#animation50percent", 20, {left:990}, '-=10') // this will start half way through the previous tween You can use similar concept for nesting timelines if your animation is more complex. Here's a TimelineLite tutorial explaining how the positioning of tweens on a timeline works. Hope that helps. Cheers Petr
  3. Ihatetomatoes
    Hey belhsann, do you have any GreenSock specific questions? Also the link in your comment goes to "Page not found".
  4. Ihatetomatoes
    Great work Jack, it's great to see you implementing features based on user requests and feedback. Can't wait to see what will be in the next release or what other cool plugins you'll come up with. Keep it up!
  5. Ihatetomatoes
    Hi idarfan, I've created a CodePen showing you a few options - http://codepen.io/ihatetomatoes/pen/1462ef622d1488e3c956bbdddb6f39fb/ As MindGamer mentioned, your TweenMax staggerTo and staggerFrom tweens are running at the same time, giving you the wrong result. The best way would be to use a timeline: // Timeline controlling boxes up/down var tl = new TimelineMax(); tl.staggerTo(".box", 2, {rotation:360, y:300}, 0.5) .staggerTo(".box", 2, {rotation:0, y:0}, 0.5); By default the starting position of the elements is the position defined in the stylesheet. In other words if you would want to swap the order of your animations, you could use something like this: // Timeline controlling boxes down/up var tl = new TimelineMax(); tl.staggerFrom(".box", 2, {rotation:360, y:300}, 0.5) .staggerTo(".box", 2, {rotation:360, y:300}, 0.5); Explore the code in the CodePen, I've commented out some of the code snippets. Cheers Petr
  6. Ihatetomatoes
    You're welcome Phil, I am happy to help whenever I can. Good luck with your project. Will you share the final project with us?
  7. Ihatetomatoes
    And if you want to stop the repeating tweens at a certain point, you can add onComplete callback function to the tween that should stop it. Eg.: tl.to("#road", 6, {left:-1456, onComplete: stopFunction}, "start"); function stopFunction(){ //stop some other tweens } Hope that helps.
  8. Ihatetomatoes
    Hey Phil, it would be great if you could show your code on CodePen, but from the code you've posted it is obvious why the animation is paused at the start. Remove these two lines: chassis.pause(); tyre.pause(); You can add your chassis and tyre tweens to the main timeline. Cheers Petr
  9. Ihatetomatoes
    Great to hear that you got it to work the way you want. The explanation of what each element actually is (video player and controls) is very useful, that way we can steer you in the right direction. Good luck with your project Chris.
  10. Ihatetomatoes
    Hi Chris, this might be tricky without the restructuring the html. The one thing is to add clearProps: 'all' to your tween, that will keep the button on top after the animation is completed. TweenMax.to("#containerDiv", 1, {rotation:"+=360", clearProps: 'all'}); http://codepen.io/ihatetomatoes/pen/019f7be746259e452b71d568c98ed5c5 You are probably trying to keep it at the top even during the animation, I don't think there is a quick solution for this, unless you restructure the html. Is there any reason why you can't create a simple html with 3 separate layers to achieve this effect?
  11. Ihatetomatoes
    @alwayzambitious, I wouldn't try to convince the whole team to stop using CSS for animations, instead try to find a creative ways how to get the best out of both worlds. The power and flexibility is in combining CSS and JS, not in using just one of these methods. It might be tricky at the start to recognise when to use CSS and when to use GSAP, but practice makes perfect. For me the biggest 'selling' points for using GSAP are: it saves me a lot of time dealing with cross-browser inconsistencies more complex animations can be done much quicker and with less code the GSAP workflow enables me to be more creative and saves a lot time too If the article didn't convince your team, then try to send them to the GreenSock Showcase or click through the latest winners on Awwwards.com. That has some impressive examples and will surely convince even the most sceptical developer and designers, that looking into GSAP is a wise move.
  12. Ihatetomatoes
    +1 for cycle from me. Alt seems to be too similar to image alt tag and might be confusing for beginners. Regardless of the final name, this is great addition to the stagger-based tweens. Great job Jack!
  13. Ihatetomatoes
    Hey @code-salad, I don't want to stir the tomato debate here too much, but thanks a lot for the cheat sheet feedback. PS: fresh salad or tomato on top of a burger or pizza - no no, pasta with tomato based sauce - yes PSS: still friends?
  14. Ihatetomatoes
    Hi cormack, the GreenSock Animation Platform from Noble Desktop is an official training manual recommended the GreenSock team. I bought a hard copy of it a while ago and I highly recommend it. It has tones of short demos explaining everything you need to know about GSAP. What I liked the most about the book: - short demos with detailed step-by-step instructions - it covers a lot of effects and animation techniques - all exercises are a real life examples You'll learn things that you can straight away apply to your own projects. And regarding my GreenSock Workshop? I am too biased to comment, but let me know if you have any questions about it. Cheers Petr
  15. Ihatetomatoes
    Hi Dave, here are two simple examples of hover and click interactions. var $box = $('#box'), $boxSmall = $('#boxSmall'); // Click $box.on('click', function(e){ TweenLite.to($boxSmall, 0.3, {x:'+=100px'}); }); http://codepen.io/ihatetomatoes/pen/YXBWwo // Hover $box.hover( function() { TweenLite.to($(this), 0.3, {scale:1.2}); // mouseover }, function() { TweenLite.to($(this), 0.15, {scale:1}); // mouseout } ); http://codepen.io/ihatetomatoes/pen/qdgNdL For you other scenario where you want to pause a timeline and restart it after a few seconds, you can use .addPause and then restart the timeline using a callback function. This thread has some code snippets that to exactly that: http://greensock.com/forums/topic/9856-inserting-a-pausedelaywait-into-timeline/?p=41088 Hope that helps.
  16. Ihatetomatoes
    @mdavison, you can also refer to the Debugging CSS Keyframe Animations article. More specifically the Debugging CSS Animation Events with JavaScript section. And welcome to the GSAP forums
  17. Ihatetomatoes
    Hey Jasper, looks like Jonathan answered this for you precisely. I have also found that people are often confused between using x and xPercent. Here's a short video explaining how each of them work and how they overwrite the default CSS styles. Hope that helps.
  18. Ihatetomatoes
    Good questions Chris, I had a similar issues, but there is a workaround. More here: http://greensock.com/forums/topic/11369-gsap-globals-for-jshint/
  19. Ihatetomatoes
    I've just uploaded an updated PDF of the GreenSock Cheat Sheet, it now includes: nested timelines snippet hover, click, random number function each loop link to a few simple CodePen demos and more. https://ihatetomatoes.net/greensock-cheat-sheet/ If there's anything you would like to see in the next update, let me know. Happy tweening.
  20. Ihatetomatoes
    Hi Zync, I believe that the only way to properly lay out your banners without flash is a good knowledge of HTML and CSS. Checkout this GreenSock banner example on CodePen - http://codepen.io/GreenSock/pen/lEiAv
  21. Ihatetomatoes
    Hi cartamundi, everyone starts with baby steps, nothing wrong with that. Great to see that you are giving it a go. Looks like you've already sorted your code out, but watch your html, there is an extra closing div that might cause some issues in older browsers. Here's the fade in/out fork of your pen, with fixed html. http://codepen.io/ihatetomatoes/pen/5860a342695e7da0a1225acaf218d622/
  22. Ihatetomatoes
    Hi Farhoud, can you setup a simplified CodePen demo with what you are trying to do? From quickly looking at your code, your first function should look like this: function fsr() { var firstSwipeRight = new TimelineMax({}); firstSwipeRighdt.fromTo(firstChanel, 0.1, { left: 0 }, { left: offset }, "firstSwipe"); return firstSwipeRight; } Cheers Petr
  23. Ihatetomatoes
    Hey Alwayz, Thanks for the shout out about the GreenSock Workshop. Jack is right it's not aimed at a complete beginners, but more specifically covers the workflow from start to finish. Here's one of the demos live - http://greensocktutorials.com/ I'll happily answer any questions about the workshop in this thread. PS: @Jack, can someone please fix the typo in the topic? My domain ends with .net.
  24. Ihatetomatoes
    Hi farhoudz, I don't have a clear solution for you, but I have a few suggestions that might make your code more compact: The first suggestion would be to use .set() instead of .fromTo() with 0 duration and use autoAlpha for animating visibility of your elements. .set(firstChanel, {autoAlpha: 0}) In terms of managing multiple timelines, I prefer to create one main timeline and then add sub-timelines to it together with a label. function getYourTl(){ var yourTl = new TimelineMax(); yourTl .to(elem, 1, {vars}) .fromTo(elem, 1, {fromVars}, {toVars}); return yourTl; } mainTl.add(getYourTl(), 'scene-one'); You can then seek to a specific time or label on the mainTl and play or reverse accordingly. Hope that helps. Cheers Petr @ihatetomatoes
  25. Ihatetomatoes
    Thanks for the mention Carl, the GreenSock Workshop is just behind the corner. Anyone can enter the free giveaway and win a free access to almost 8.5hrs of GreenSock tutorials.
4
5
6
Page 5 of 6  
×
×
  • Create New...