Popular Content

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

  1. 6 points
    Are you sure waiting for the page to completely load is a good idea? It looks like you have a bunch of images, and on a slow network the user might be staring at a blank screen for a while. Anyways, here's a pattern I sometimes use. I hide stuff until the DOM is ready by putting an "unresolved" attribute on elements to prevent FOUC. The unresolved name is arbitrary, so you can use whatever name you want. <html> <head> <style> [unresolved] { display: none; } </style> </head> <body unresolved> ... </body> </html> From there I check the readyState of the document to determine when to initialize the app. Notice the difference between the "DOMContentLoaded" and "load" events. I'm usually only interested in when the DOM is interactive, so I don't worry about all the images being loaded. https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load if (document.readyState === "interactive" || document.readyState === "complete") { resolve(); } else { window.addEventListener("DOMContentLoaded", resolve); } // Initialize your app function resolve() { document.body.removeAttribute("unresolved"); TweenMax.from("#content", 1, { opacity: 0, y: 50 }); }
  2. 5 points
    I'd probably use a NodeLIst which is recreated each time you clone an .item. Then use an activeItem variable to see which one is in view and scroll to the prev/next one. Maybe something like this: I assumed you wanted to go straight to the new div when you create it. If that's not what you wanted, you could simply remove the tween from that event handler. Hopefully this helps. Happy tweening.
  3. 5 points
    Hi @elegantseagulls You can add the duration like this: jetTL.tweenTo('turn0').duration(1); Happy tweening.
  4. 5 points
    @OSUblake How geometrically elegant, a true heir of Pythagoras
  5. 5 points
    Hello @Mantvydas and welcome to the GreenSock Forum! You will get better performance animating position absolute elements versus position static or relative. This is due to the fact that when you animate the element it will be animated outside the flow of the document. That means that it wont have to calculate its surrounding elements in the DOM, since elements with position relative and static are still in the flow of the document. But its always best to animate with position absolute so when the element animates its surrounding elements wont need to be calculated, but sometimes a layout might not allow you to do so. Just my two cents, Happy Tweening Resources: CSS position: https://developer.mozilla.org/en-US/docs/Web/CSS/position CSS layout positioning: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning CSS visual formatting model: https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model
  6. 5 points
    Another approach that requires a little more work, but is more flexible. It finds the closest point on a path, and does not require a proxy element. A couple threads on the technique.
  7. 5 points
    Hi, I had to deal with something like this about a month ago. First you forgot to include jQuery in the pen's resources. Then in order to enforce the right bounds, you need to find the dimensions of the path you want to use as track using getBBox() and use those in the Draggable instance, but for that you have to line up the patch and the track correctly, otherwise it looks a bit funny: var bounds = document.getElementById("line2").getBBox(); var R = Draggable.create( "#patch_218_454", { type: "x,y", bounds:{ minX: 0, maxX:bounds.width, minY:-5, maxY:bounds.height - 5 }, onDrag: function (e) { console.log(e.offsetX); console.log(R); } }); Then in order to limit the patch movement to the path you want to use, don't use the Draggable instance on the patch but in a dummy object, then simply trigger the instance using the patch and update an independent GSAP instance using the onDrag callback. This sample from one of our heroes @Diaco shows how to do that: Here in the docs, more specifically in the config object properties you'll find the trigger property. https://greensock.com/docs/Utilities/Draggable Hope this helps. Happy Tweening!!!
  8. 5 points
    The progress() method is available for tweens too. https://greensock.com/docs/TweenMax/progress() If you have a bunch of loose tweens, I'd recommend a timeline for easier control, but that's just my two cents worth. Happy tweening.
  9. 4 points
    What I typically do is load up a shell of the page first, like the header, navigation, footer, etc, and then animate page content in and out. Here's an example of that using a basic router.
  10. 4 points
    To wait for everything to be loaded, like images, that snippet would look like this. if (document.readyState === "complete") { resolve(); } else { window.addEventListener("load", resolve); }
  11. 4 points
    Not only that, but the source code of that three.js demo does the same thing I described. Sine.easeInOut is Math.sin(). The 3d perspective isn't important. Look at how the init and render functions work. Demo - https://threejs.org/examples/#canvas_particles_waves Source - https://github.com/mrdoob/three.js/blob/master/examples/canvas_particles_waves.html For a parallax effect, you can scale your values by some ratio, like in this post. I'm guessing @Shaun Gorneau did something similar.
  12. 4 points
    You can use the intersection observer for scrolling, and there are polyfills for IE and Safari. It's asynchronous, so some of your code might be deferred under heavy load, but performance should generally be better. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API Yes, check out the docs for the CSSPlugin. That's where most of the magic happens if you're animating the DOM. https://greensock.com/docs/Plugins/CSSPlugin Also, using CSS Containment can help with reflows/repaints, but browser support isn't that good at the moment. https://developer.mozilla.org/en-US/docs/Web/CSS/contain
  13. 4 points
    You can always use promises for complicated async behaviors. Async/await works in all modern browsers, and there are plenty of polyfills for older browsers, button.addEventListener("click", async () => { await new Promise(resolve => animateAsync(resolve)); // Starts halfway through the first animation animateSync(); }); function animateAsync(resolve) { var tl = new TimelineMax({ delay: Math.random() }) .to(elementA, 2, { x: 500 }) .add(resolve, 1); } function animateSync() { TweenLite.to(elementB, 1, { x: 500 }); }
  14. 4 points
    Interesting question... I assume you are aware of much what I am about to write, I'm just 'writing it out loud' as it helps me think.. You know that you can add a nested timeline that will only play when the parent timeline 'cursor' gets there without having to set it's property to true. However you want to create a timeline, wait for an async response in the future then add it to the parent. May I ask you why? Why must you create the timeline before the async response? Creating timelines is generally so cheap you could just wait for the response before creating and adding the nested timeline. You also say the secondary timeline may be reused several times. Well, that begs another question. Are you saying you want the same timeline nested into different timelines? And somehow it knows if it's been played in any of the parents? Or do you want the same type of animation created after a certain event has occurred? For the second option, returning a timeline from a function will do the trick.
  15. 4 points
    It looks like this is the 3rd time you've posted a version of this question about your canvas project. In your most recent post (which you've now deleted), Jack gave you this answer: We're more than happy to help with GSAP related problems, but these general JS and canvas questions should be posted on a more general forum. Perhaps you could try Stack Overflow.
  16. 3 points
    @PointC this is exactly what i wanted!! thank you very much, well this gonna be my first try using greensock on my project. and yes it is true that everytime i clone an .item it should go straight to that div/item. Thanks
  17. 3 points
    Is this the effect you're after?:
  18. 3 points
    I guess it depends on what your drawing, but most people animate the stroke-dashoffset and stroke-dasharray, like the DrawSVGPlugin does. https://greensock.com/docs/Plugins/DrawSVGPlugin Not saying that is the best technique, but it's certainly easy. For lines/polygons, I like animating SVGPoints directly. That can be used to create some pretty interesting stuff, like waves.
  19. 3 points
    x1 is a property of a line, but it's value is set on a different path/object. this.line.x1.baseVal.value = 150; Definitely not a convenient value to animate. Try using the AttrPlugin. https://greensock.com/docs/Plugins/AttrPlugin TweenMax.to(this.line, 1, { attr: { x1: 150 }, stroke: "red" }) Updating to the latest version of GSAP wouldn't hurt either. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js
  20. 3 points
    Specifically to the part of the question "How can I get each line of balls moving a bit slower than the last line" ... you can pass a speed parameter to `new Circle` and use whatever math you like to calculate that value. I used something simple to illustrate.
  21. 3 points
    @PointC Oh, dang! Thanks! Not sure why that didn't cross my mind.
  22. 3 points
    Sounds like you're looking for the ScrollTo plugin: https://greensock.com/docs/Plugins/ScrollToPlugin That will allow you to scroll directly to an element like this: TweenMax.to(window, 1, {scrollTo:"#yourElement"}); Hopefully that helps. Happy tweening.
  23. 3 points
    I hope you realize that getting the scroll position causes a reflow, so using ScrollMagic can negate some of those benfits. 🤔 https://gist.github.com/paulirish/5d52fb081b3570c81e3a And scaling isn't as optimized as most people like to think. The browser can rasterize the content, limiting the amount of scaling you can do before it starts looking like crap, or it can repaint the content on every animation frame. Using will-change will cause rasterization. https://greensock.com/will-change https://dassur.ma/things/forcing-layers/ To scale x, simply scaleX. .to( animate.down, 1, { x: animate.neg, y: animate.pos, scaleX: 0, repeat: 1.25, ease: Sine.easeOut, yoyoEase: true }, "together" ) To prevent squashing/stretching of children during a scale animation, you can apply a counter scale.
  24. 3 points
    Hi @Marme, Welcome to the GreenSock Forum. If you are looking for a randomly controlled background animation, take a look at this one: You can customize a number of adjusting screws. Plus blurred SVG circles instead of the gulls ? Best tweening ... Mikel
  25. 3 points
    Thanks for providing all the clear demos. Without knowing more of the requirements I would agree with Dipscom's solution of using a function to return a timeline on demand. What he is referring to as the 'cursor' we typically call the playhead (if that helps clear things up at all). The engine won't automatically unpause a child that you explicitly tell to be paused as that could really confuse people. "wait, I told this timeline to be paused, why is it now playing?" I guess I'm not understanding why the first example you provided (where you unpause it when you add it) is not suitable. After some thought and tinkering it seems you could place a callback at the same time as your paused timeline is inserted and use it to unpause that nested timeline. Not sure if that's really the best solution, as there will an imperceptible delay (of a few MS) between when the function is called and when it executes, but it might be an option for you document.getElementById("add").addEventListener("click", function() { mainTl.call(unPauseATimeline, [secondaryTL]); mainTl.add(secondaryTL) }); function unPauseATimeline(timeline){ timeline.play(); }
  • Newsletter

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

    Sign Up