Popular Content

Showing content with the highest reputation since 09/23/2018 in all areas

  1. 7 points
    The waark site appears to use a dom element that is the size of the window and loads all animated elements into it. Just a guess but because the content is the size of the viewport the document does not actually scroll it is likely using an event listener to activate animation using deltaY. See: https://www.w3schools.com/jsref/event_wheel_deltay.asp https://www.sitepoint.com/html5-javascript-mouse-wheel/ https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY With wheel events you can trigger animations with deltaY changes. Setup the container 100% high and wide with overflow hidden then you can place all animation content inside it and show hide and animate it to the deltaY changes.
  2. 6 points
    I'm not really sure what should be happening here, but you're creating your timeline every time you click the section 1 button. This is causing overwrites and everything will look funky. I think you meant to make the master a global variable and restart it on click. Please make these changes to the end of your code. $('#btn1').click(function(){ $('#c2').css('display','none'); $('#c1').css('display','block'); master.restart(); }); we3dxAnimation(); Happy tweening.
  3. 5 points
    If I understand you correctly, that's actually quite purposeful but it's easy to change the behavior to what you want. It should be as simple as setting: CSSPlugin.defaultSkewType = "simple"; Or on a per-tween basis: TweenMax.to(... {skewType:"simple", skewY:30}); From the docs: Does that resolve things?
  4. 5 points
    Hi @Jonathan, Yes, the Banksy approach is the proper reaction to many problems. So it would be helpful if I see myself in the mirror in the morning, it would be banksy-ed. Let's shred ... Mikel
  5. 5 points
    Hi, For all Banksy fans here the version a la GreenSock. It's a fork of a pen by Lee Martin, who reacted super fast. I like the art of Banksy. But I have not taken his original work. Otherwise this pen would definitely be hacked. Have fun ... Mikel
  6. 5 points
    Have you tried calling SVG technical support? That's just the nature of how strokes are drawn. The way I've dealt with that in the past it to animate the scale or stroke width from 0.
  7. 5 points
    Brilliant .. i love how Bansky keeps sticking it to the art establishment
  8. 5 points
    Firefox is the only browser that supports 3d for SVG, but it's very limited. You can wrap your SVG in a div, and animate the div instead.
  9. 5 points
    I can't access your site, so I can't see what's going on. GSAP doesn't do any rendering, so I don't see how this could be related to GSAP. Does your div contain SVG or complex fonts/text? That can be slow. Scrolling can be a bottleneck, and ScrollMagic isn't a GSAP product. https://github.com/janpaepke/ScrollMagic If you need something to be pinned, consider using CSS sticky positioning instead. https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning
  10. 5 points
    It depends on what you're doing. Animations that repeat can be difficult to manipulate from a master timeline, like here. If you need play/pause, you can do this. function pause() { for (var i = 0; i < myAnimations.length; i++) { myAnimations[i].pause(); } } function play() { for (var i = 0; i < myAnimations.length; i++) { myAnimations[i].play(); } } Check out this article. Lot's of good stuff in there, like tweening a tween (#1) and exportRoot (#6). https://medium.com/net-magazine/7-hidden-gems-of-the-greensock-animation-platform-4fb71389f6ca https://greensock.com/learning-gems MDN is kind of like the official documentation for web related stuff. I'm sure there are more in-depth tutorials out there, but this is a good start. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryListEvent https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
  11. 5 points
    Hi, Thanks for the demo. I think you want to use addPause() here tl.addLabel('step1') .to('.red', 0.5, {width:250}) .addPause() .addLabel('step2') .to('.blue', 0.5, {width:450}); you use pause() to pause a timeline at any time. The way you were using it you were pretty much pausing it as the timeline was being created. addPause() inserts a pause into a timeline at a specific point in time. more info here: https://greensock.com/docs/TimelineLite/addPause()
  12. 5 points
    When you set the transform origin for an SVG element with GSAP, it should look like this when you inspect the style. element.style { transform-origin: 0px 0px 0px; } The transform origin on your .au site looks like this. element.style { transform-origin: 0px center 0px; } If I manually change the eyes to use transform-origin: 0px 0px 0px; it works correctly. I don't know why the transform-origin is incorrect, but that's the problem. Make sure you're using the same SVG and code between both sites. I noticed the code in your .au file didn't have the same number of lines as your .uk file.
  13. 5 points
    That's because of this line in your each() loop. var active = TweenMax.staggerTo(".timeline-circle", '.6', {css:{className:'+=active'}, ease: Power2.easeOut}, '.1'); That will create an identical stagger tween for all the .fade-section elements that animates every .timeline-circle. So, when you hit the first trigger, all the circles animate. You want to only target the .timeline-circle contained within each particular .fade-section. Please try this: var active = TweenMax.to($(this).siblings(".timeline-circle"), '.6', {css:{className:'+=active'}, ease: Power2.easeOut}); If you want the text and circle to animate at the same time you can also change line 12 to this. timeline.add(fadeIn, 0).add(active, 0); Happy tweening.
  14. 5 points
    Hi @Faaiz, For fun of the joy ... And if it should be called by buttons: Happy tweening ... Mikel
  15. 5 points
    Hi @BeckBeach A mesh is like the geometry and the appearance/surface of something. Image an image. Now divide that image up into a grid. Each grid cell is split into two triangles. That's essentially what a mesh is. Animating a 2d mesh with PixiJS. The vertices are the corners of the grid cells, which are represented by the red dots. The vertices are stored inside a single array, which isn't a convenient object to animate, so I map the vertices to point objects. I then animate the point objects with GSAP, and then on every animation frame, map the point object values back to the vertices array. That might be easier to do with three.js, but the concept is still the same. You can animate the points (vectors) of a mesh. Check out this demo. It's not using GSAP, but it's the same effect you're asking about. This is what the burger looks like. They are using canvas to convert that image into a mesh. They loop through the image data, getting the rgba value of a pixel at a certain interval, and use those values to set the color and xyz value of a vector. To learn more about image data, check out this tutorial... https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas And this post... https://codepen.io/rachsmith/post/getting-getimagedata
  16. 5 points
    I think something like this would work: return Math.floor(Math.abs(i - (boxes.length - 1) / 2)) * 0.25; @Visual-Q it doesn't look like the formula you're using delivered the results @PointC was looking for, unless I'm misunderstanding.
  17. 5 points
    Hi and welcome to the GreenSock forums, GSAP doesn't natively do anything to output MP4 video, but there are a few tools out there that can scrape the rendered frames and create a video. This thread here is a good start, be sure to click on the links to other threads and demos
  18. 5 points
    Hi @ainsley_clark Your issue has nothing to do with GSAP. How are mouse events detected? The mouse has to be over the bounding box of the element. Your test element is listening for the events, and it doesn't have a height, which is part of the problem. If the mouse enters or leaves a child element, that event will bubble up to the test element listener. When one of the child elements rotate, the mouse might be inside the bounding box, but as it rotates more, the mouse might end up outside the box, triggering a mouse leave event. This should help you see the problem. I can position the mouse in such a way that it will infinitely play back and forth. To fix it, it might help if you give your test element a height, and set pointer-events: none; in your CSS for the children of the test element. BTW, you're not supposed to nest elements inside a heading element i.e. your h1.
  19. 4 points
    You can't say it doesn't work if there isn't any animation code. Try making the animation work without Vue first. If you need help with canvas, check out this post, and everything it links to. https://greensock.com/forums/topic/18873-animating-canvas-fillstyle-with-gsap/?tab=comments#comment-87524 And I'm pretty sure you can make a canvas animation reactive. These examples use state. https://vuejs.org/v2/guide/transitioning-state.html
  20. 4 points
    Which div are you referring to? I looked at the site, and everything is jumping around and flickering when I scroll. One problem is that the overflow on the body keeps changing, but I don't know if that's the problem you're talking about.
  21. 4 points
    Will absolutely do it! And I see you meant "truly" one line! I thought you meant one chained event I included a yoyo only because I caught a glimpse of it in your original code. With or without, you certainly answered your own question! Nicely done! Here is a pen using your method
  22. 4 points
    You're setting the strokeDashoffset as a CSS inline style, which has precedence over attributes. So you would need to set the attribute if you want to animate the attribute. TweenMax.set(path, { attr: { "stroke-dashoffset": 1 } }); My personal preference is to use CSS over presentation attributes so I don't run into problems like that.
  23. 4 points
    Hi @kbeats You're targeting the whole SVG, but the morph plugin works path to path. You'll need to target the polylines in the SVG. Happy tweening.
  24. 4 points
    The second seconds suggestion works perfectly, I also relied on Thanks OSUblake
  25. 4 points
    Here's a fun little entrance. I'm scaling everything from the same point. You need to open it on Codepen to see the full effect.
  • Newsletter

    Want to keep up to date with all our latest news and information?

    Sign Up