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 Olle, glad you got it working. The issue with flickering is most likely due to some of the CSS you've used for positioning and not a ScrollMagic issue. In general, position: absolute (in combination with x, y, top, bottom, right, left or transform) would be the best approach to keep your animations nice and smooth. Good luck with your project. Cheers Petr
  2. Ihatetomatoes
    @alwayzambitious GreenSock Workshop is just behind the corner. Enter the free giveaway before it's too late.
  3. Ihatetomatoes
    @ektorp, the ExtraSlider is cloning the first slide and appending it to the last one, that makes it visually look like an infinite loop. Then it goes back to the second item etc. I will be building a few more advanced projects in my upcoming GreenSock Workshop and one of the is a fullscreen slideshow. Check out the preview video.
  4. Ihatetomatoes
    @alwayzambitious, yep that is possible with GSAP. You can have a large 'canvas' (doesn't have to be HTML5 <canvas> element) and move around it based on bezier curve tween or timeline. I might do a simple demo on my site in the future.
  5. Ihatetomatoes
    Hi and welcome to the GSAP land. As Carl mentioned it is possible to animate your page diagonally on scroll. I wouldn't say it's any harder than creating horizontal or vertical scrolling website. Once you create the GSAP Tween or Timeline you can than add it to a ScrollMagic Scene and let ScrollMagic trigger or play your animation. If this is your first attempt at creating parallax scrolling website, I would recommend only animating the cheap CSS3 properties such as opacity and transforms. This will result in a smooth user experience across all the modern browsers. And here's another 24 Tips For Making Great Parallax Websites. Good luck.
  6. Ihatetomatoes
    Hi grantambrose, this is a quite common issue when animating elements on page load. Your approach with hiding body by default using inline CSS is the right one. I would suggest adding a class to the body instead of the inline styles and then remove this class using the .set() method. <body class="loading"> ... </body> body { transition: all 0.3s linear; } .loading { opacity: 0; visibility: hidden; } TweenMax.set($('body'), {className: '-=loading'}); You can use the CSS3 transition inside of the body to define the right fading duration. If you are concerned about the users without JS not being able to see anything, then you can use modernizr class .no-js and turn the visibility and opacity on like this: .no-js .loading { opacity: 1; visibility: visible; } Just wanted to share my approach, that you might find useful. Cheers Petr @ihatetomatoes
  7. Ihatetomatoes
    @violacase, thanks for the compliment and checking out my YouTube channel.
  8. Ihatetomatoes
    Hi Thomas, have you tried to split your SVG animation into two timelines or tweens and have two ScrollMagic scenes? Each scene would then trigger and animate only half of your complete timeline eg: 1. Scene 1 would animate the SVG from 0 to 50% 2. Pause 3. Scene 2 would animate the SVG from 50% to 100% You can define the length of the pause by setting a right offset to the Scene 2. Hope that helps.
  9. Ihatetomatoes
    Hi Leandro, to get the perfect position of two layers (background image and svg) on top of each other will be challenging if you use the background-size: cover. I would recommend using FocusPoint - to resize an image and then resize your SVG to the same dimensions. This will make sure that: - the focus point of the image is always visible at any screen size - the SVG is perfectly aligned on top of the image - you can animate the inline SVG and it's content Hope that helps. Cheers Petr @ihatetomatoes
  10. Ihatetomatoes
    You can apply the clipPath to an SVG group. Check out these two articles to see how clipPath works: http://sarasoueidan.com/blog/css-svg-clipping/ http://tutorials.jenkov.com/svg/clip-path.html
  11. Ihatetomatoes
    @Lynx I've created a ribbon like animation on this SVG Christmas card by animating clipPath on a few parts of the SVG. So to answer your question, yes you can create a ribbon like animation, you just have to be a little bit creative with your CSS and HTML. Hope that helps.
  12. Ihatetomatoes
    Thanks Carl, as I mentioned in the email I will be adding a second page with a few more snippets and also some of your plugins specific code. Stay tuned.
  13. Ihatetomatoes
    Hi, Just wanted to leave a link to the GSAP 2 Cheat Sheet in the forums. https://ihatetomatoes.net/greensock-cheat-sheet/ If anyone has any comments or feedback please let me know. Happy tweening! Cheers Petr @ihatetomatoes
  14. Ihatetomatoes
    Hey HaunGo, I think that something like GSAP Physics2DPlugin could be used for the collision detection part. Here's the plugin in action on CodePen. 1. Use inline <svg> (string of code) if you want to animate the SVG itself or part of it. 2. As per above, I would use the plugin. Faking collision, gravity etc would be a lot of work and would most likely not look very realistic. 3. I have a few ScrollMagic tutorials on my blog, that might be helpful for the triggering part of your project. Cheers Petr
  15. Ihatetomatoes
    Thanks for the suggestions Jonathan and for the clarification Jack. I guess I have to just stick to pixel based SVG animations for the time being.
  16. Ihatetomatoes
    Hi, I've created SVG animation which you can see below. 1. Demo with animated <g id="tomato"> element http://codepen.io/ihatetomatoes/pen/VYLMrJ This works great in Chrome, but not in FF & IE because I didn't realize that <g> can not be animated because it doesn't have x/y coordinates. 2. Demo with animated <svg id="tomato"> element So I've created svg out of that group and animated that instead. You can see it here: http://codepen.io/ihatetomatoes/pen/xbZzXp Again, this works as expected in Chrome, and FF also bounces the tomato, but some reason the xPercent values are not applied in FF & IE. Any idea why? tl.set(tomatoLeft, {xPercent: 23.6}); tl.set(tomatoLeaves, {xPercent: 41}); 3. Demo with animated <svg id="tomato"> and animating x When I change the xPercent offset to x, everything seems to be working fine also in FF & IE, but I wanted to keep the animation responsive. All I've changed is the xPercent to x like this: tl.set(tomatoLeft, {xPercent: 23.6}); tl.set(tomatoLeaves, {xPercent: 41}); // Became tl.set(tomatoLeft, {x: "+=26px"}); tl.set(tomatoLeaves, {x: "+=26px"}); .to([tomatoLeft, tomatoLeaves], 0.2, {xPercent: 0},"split") // Became .to([tomatoLeft, tomatoLeaves], 0.2, {x: "-=26px"},"split") Here is the updated Codepen, which works fine in FF & IE. http://codepen.io/ihatetomatoes/pen/XJXYZa Questions How do I keep the xPercent offsets and make this work in FF & IE? Maybe I am missing something simple, after staring at the tomato too long. Keep up the great work with GSAP Carl and the team. Cheers Petr
  17. Ihatetomatoes

    Tutorials?

    Ihatetomatoes replied to azuki's topic in GSAP

    Nice work Christo, I have added another tutorial to the collection. http://goo.gl/mG2HP In terms of "a-haaa" moment, I didn't want initially try to learn new animation library, but seeing few tutorials and videos made me realise that the syntax is very simple and the results are looking great and consistent across the browsers.
  18. Ihatetomatoes

    Tutorials?

    Ihatetomatoes replied to azuki's topic in GSAP

    Hi there, I have made a tutorial which might be handy to some of you. Tutorial: Create Apple elastic navigation using Greensock http://ihatetomatoes.net/tutorial-apple-navigation-using-greensock/ Let me know what you think. And stay tuned for more. Cheers P.
×
Login Create Account