Popular Content

Showing content with the highest reputation since 09/21/2018 in Posts

  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. 6 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.
  4. 6 points
    You were calling staggerFrom on elements with class 'element-span'. So each loop was adding same elements to the timeline which was creating conflict. You need to select children of current element instead of all elements.
  5. 6 points
    It's really bad on Windows 10 for me. It's some kind of graphics/GPU issue. You should probably file a bug. I got it working better by rotating the SVG instead of the path, and adding will-change to the CSS, but I still see artifacts on my computer depending on the number rays. 59 and 60 always have rendering issues on my computer.
  6. 6 points
    I'm assuming you just want a seamless rectangle? That should get you started. Happy tweening.
  7. 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
  8. 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()
  9. 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.
  10. 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.
  11. 5 points
    Hi @Faaiz, For fun of the joy ... And if it should be called by buttons: Happy tweening ... Mikel
  12. 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
  13. 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.
  14. 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
  15. 5 points
    This might be a bit tricky. Just so we understand the desired result here. You want the tile to change color as it starts traveling each new segment and that new color is based on the direction of travel? The user is allowed to click multiple times to rapidly advance through each segment? I would also assume you want an immediate color change if the user clicks in the middle of a section to reverse the direction of travel? I'm not sure the progress() method is gonna be best here. It might be better to tween to the polyline points and call a function to check the direction of travel and whether it's a north/south or east/west segment. Blake may jump in with something amazing, but I'd have to think about this one a bit.
  16. 5 points
    There are many ways to do this, but here's one: Basically, figure out the height based on the parentNode's change in height. Does that help?
  17. 5 points
    I think you see some oddness there because you have divs that aren't closed. You started your container and test divs, but didn't close them. On line 28 you started a new div, but I'm assuming that should have been a closing tag for the test div?
  18. 5 points
    GSAP doesn't do any rendering. It changes values over time. If the value gets correctly set, which it does, then it's not related to GSAP. I think the problem is that you're asking the browser to do too much. Mobile devices are pretty limited when it comes to performance. I'm on a workstation and your animation causes a massive drop in performance during the first couple of seconds, and the layers keep on changing until rotation is the only thing being animated. When you animate something other than transforms, opacity, or a filter, the current raster of the content has to be destroyed, recalculated, rasterized, and uploaded to the GPU, which is slow. left and top are the biggest problems here. z-index is questionable. scale is a transform, but it's also questionable because it causes a repaint if you don't use will-change in certain browsers. {left:'0%', top:'70%', scale:.12, zIndex:5, filter: 'brightness(80%)'} And filters can be slow due to stacking contexts. https://developers.google.com/web/updates/2017/10/animated-blur I would first try switching left and top with x and y, and setting will-change in your CSS. .spaceship { will-change: transform, filter; } Just be aware that will-change can cause problems, and scaling might not look good. https://greensock.com/will-change https://dassur.ma/things/forcing-layers/ If you still have problems, you should look into using canvas.
  19. 5 points
    Sure, happy to help. Just in case my explanation of the easing was as clear as mud, I made a quick demo for you. It has three boxes that all tween 400px on the x and they all start at the same time. You can drag the slider to control the progress of the timeline. You'll see at 50% the Linear tween is exactly at the halfway point where you would expect it to be whereas the easeIn looks like it barely started and the easeOut looks like it's about finished. Hopefully that helps a bit. As @Carl mentioned earlier in the thread, you can upgrade to Shockingly Green to start using that MorphSVG plugin in the wild. Let us know if you have any more GSAP questions. Happy tweening.
  20. 4 points
    Hi @TradingBo You don't have a master timeline, at least not in the sense that you think you do. Your functions are only returning the very last timeline created in a loop. You would need to add every timeline created in a loop to an array, and return that array. But don't be like this dude when it comes to master timelines. I see far too many people waste far too much time building master timelines that serve no actual purpose. See if this helps out.
  21. 4 points
    Hi @zzwes Welcome to the forum. There would be a few ways to make this happen. Based on what you have so far, I'd probably create a timeline for each pizza and change the starting progress(). (Pretty much what you were doing). I then added each timeline to an array, loop through it and increment the progress of each timeline by +0.2. every few seconds. I've just used a delayed call to keep the animation going, but you could certainly add some interactivity with a button or draggable too. Here's a fork of your pen. You mentioned poor performance on mobile. Please keep in mind that GSAP is only animating values. All the rendering is done by the browser so you may still see less than desirable results on mobile with these images. Hopefully that helps. Happy tweening and welcome aboard.
  22. 4 points
    Oh, that is some tight artwork. Not quite what I was picturing, but you can still use a loop to create a bunch of circles in a mask. I just eyeballed this so you'll probably need to make some adjustments, but here's a fork of your pen that should get you started. Does that help? Happy tweening.
  23. 4 points
    It's hard to say what the problem is without seeing it. First, make sure you don't have CSS animations that are animating the same properties as GSAP. Same goes for jQuery. Your're using fadeIn/Out. I would only use GSAP. I noticed a setTimeout, which can cause timing problems when working with animations. Use TweenLite.delayedCall() instead. https://greensock.com/docs/TweenLite/static.delayedCall It can also be canceled. https://greensock.com/docs/TweenLite/static.killDelayedCallsTo But the thing that sticks out the most is that you are using from animations in one of your callbacks. Rapidly click the button in the demo below to see how that can result in unexpected behavior. It's very easy to break your demo doing the same. Another thing to be aware of when using from animations is immediateRender. https://greensock.com/immediateRender
  24. 4 points
    If you don't want to support rapid clicks then you can add logic to ignore clicks when your tween that controls timeline is active. If you want to support rapid clicks then you will have to calculate angle using onUpdate. Following is the example show how you can calculate the angle, check the console. Now you can use that to determine angle based on range you want. Also, adding classes might not be best idea, instead you can do that directly from javascript. You can simplify your math to determine range by using a rectangular map and skewing your svg. Though if you plan to add text to it then you won't be able able to use this trick. You might be able to use it by adding reverse skew on text.
  25. 4 points
    Sorry, the current SVG spec doesn't allow 3D transforms on child elements. SVG 2.0 probably will. For now you can rotate the whole SVG all you want. Hopefully that helps. Happy tweening.
  • Newsletter

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

    Sign Up