Jump to content


Popular Content

Showing content with the highest reputation since 06/26/2018 in Posts

  1. 11 points
    Hello everyone, This post is going to be one of those a little long and for those more busy and timeless it is about: A person who had a dream and when he reached resolve to thank the people who helped reach that goal. Well let's go then: First, this was my first post on the forum: https://greensock.com/forums/topic/16437-animation-scale-left-to-right/ And on this date I still used Adobe Muse to make a website because I did not know anything about HTML / CSS, but I already wanted to be good, make sites cool, cool and one day I could gain recognition at Awwwards, so if you go see this post will see that mention a site that had just won this recognition. But it was impossible to win not knowing HTML and CSS, so I started to study and learned everything by scouring the internet inside, but something I was sure, to get there I would need to master doing Animations, so every day I needed to understand how it worked the GSAP. I was studying and creating new challenges and whenever I tried to do something and did not find the solution on the Internet, I was obliged to ask in this Forum, and at no time did I leave here without a useful answer, ready for me was very clear, I had found a source for learning and for evolution. So know that this is how I and many people see this forum. So after less than 2 years of many studies and many questions I finally decided to run my dream that was to gain a recognition at Awwwards, and to my surprise I did not only won as a Site of the Day but also the Developer award. A reason for much satisfaction and pride, and I certainly could not without the support, help of this incredible community, who always welcomes and helps everyone who comes here to seek a light for their goal. So thank you to all of you and as a form of gratitude and recognition I made a point of mentioning in the thanksgiving session of my website (http://victor.work) on the page about, because it is also conquest of you. (and also mentioned GSAP FORUM in my hobbies) So through all this I would like to let you know that you provide a very important role for the web community, a tool that we can evaluate as perfect and yet I see you doing the best and working hard to perfect it even more. Guys you are very importants. I'll leave the recognition link here at Awwwards: https://www.awwwards.com/sites/victor-work-folio19 Anyway, this is it: Thank you very much indeed, you guys are awesome.
  2. 10 points
    Oh my turn! my turn!! PS: Sorry couldn't resist
  3. 9 points
    Ya there is a lot of code that I am not even sure what is the purpose of that. You are using container's height and width to calculate progress of tweens based on where the cursor is inside the container. Now your container can be a div or window and you need to know how using either affects the implementation. First thing you need is to position your elements where you want them when mouse is at center and from that position eye will translate. You can't use pageX in your actual project because if you scroll it will throw off your calculations. You need to calculate mouse position like I did if your page scrolls. You also need to reset value of rect on resize and scroll event. Figuring out how much the eye should move doesn't need all that calculation, you can just use a number based on radius of your circles.
  4. 8 points
    Thanks for that Joint.js reference. I had also known of it and was gonna post it also but didn’t notice or realize they offered an open source version (cool I better re-look at some others too). There are also others which are only payment or subscription based. Along with a lot of other frameworks related specifically to flowcharts and diagraming which offer connectors but those may or may not have the required events, callbacks etc., logic included. You can even find some nice D3.js, etc., examples which are relative. Many options to choose from but of course no one size fits all. So it just simply can't be definitively answered in a simple forum post to satisfy everyone or every need for such a broad topic. ;--) Nah I don’t accept that, my post was basic. Not to name drop (and in no particular order) but virtually every snippet and code logic discussion posted by any of these users are generally encapsulated with nuggets of pure brilliance and learning opportunities: @GreenSock , @Carl , @OSUblake , @PointC , @Jonathan , @mikel , @Dipscom , @elegantseagulls , @Rodrigo , @Shaun Gorneau , @Sahil , @Acccent , @Diaco , @Victor Work , @Visual-Q , ++++ so many others. Including many single post wonders by people which are never to be heard from again. Many thanks to all ! These people and many others are all Greensock forum heroes, and much more worthy of such high praise for their daily posts. But I'm still glad you liked the post, thanks.
  5. 8 points
    Hey everyone We’re rolling up on Thanksgiving here in America, so I thought I’d say how thankful I am for this forum. You’re a terrific group of people and one AI. I’m so glad I started participating a few years ago. It’s truly been life changing. As a thank you, I’m gonna drop a couple sliders here for the community. I know there are umpteen ways to make a slider, but this is my take on it. I added multiple control types and linked the nav dots animation to the draggable element for a bit of fun. We often have questions about sliders so hopefully these will be a good jumping-off point for someone. Happy Tweensgiving
  6. 8 points
    Hi @elpeyotl, Or this from Jenkov (****). My workflow in short: Clean the source code of your svg images: svgomg New svg - starting with part '#total' Add the other parts (same viewbox) and group all their elements (<g> </ g>) The masks are hand coded - its easy if rectangles Important: The closer the color of the masking shape is to #ffffff (white), the more opaque the shape using the mask will be. Important: reference the mask ID attribute (e.g .: <g id = "total" mask = "url (#MaskTotal)">) Important: Series of parts. First #factory, then #total (transparent through the mask), ... last #oneStart (there is no z-index!) You can tween x, y, width, height ... of the masks. Orientate yourself by the dimensions of the viewBox = "0 0 232 232" #total: two separate masks half of the viewbox, the left is tweened by width, the rights by x-position Hope this helps you ... Mikel
  7. 8 points
    It's not a bug. That's what happens when you interrupt a from animation. If the scale is at 0.1 when you interrupt the animation, it's going to animate the scale from 0 to 0.1. Try this. // You can set this when mounted TweenLite.set(".es-bubble", { transformOrigin: 'bottom bottom', }); TweenMax.staggerFromTo('.es-bubble', 1, { scale: 0, opacity: 0, }, { scale: 1, opacity: 1, ease: Elastic.easeOut, // force3D: true // doesn't work on SVG }, 0.1)
  8. 8 points
    An example of triggering animations with the Intersection Observer API. Notice how the handler only toggles the playback state of an animation. if (entry.isIntersecting) { // play animation } else { // pause animation } Your handler is adding the same animations to an already existing timeline, so it's getting longer and longer every time entry.isIntersecting is true. So maybe something like this. inView(entry) { if (entry.isIntersecting) { if (!this.state.firstInview){ TweenMax.to(this.sun, 4, {opacity: 1}) this.setState({firstInview: true}) } this.tl.play() } else { this.tl.pause(); } } componentDidMount() { TweenMax.set(this.sun, {opacity: 0}); this.tl = new TimelineMax({ yoyo: true, repeat: -1, paused: true }) .to('.sun-flare--1a', 1, { x:50}) .to('.sun-flare--2a', 1, { y:50, onComplete: () => console.log('TL-1+2 completed') }, 0) .to('.sun-flare--3a', 3.5, { y: 150, onComplete: () => console.log('TL-3 completed') }); } And your click handler isn't working because of the parentheses. That will immediately execute the function. // Bad <svg onClick = {this.clickHander()}> // Good <svg onClick = {this.clickHander}>
  9. 8 points
    Hi @jp_uk81 There's a problem with the order in certain browsers. For example, Chrome reports the color first. element.style { filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 0px 14px); } My workaround, use CSS variables.
  10. 8 points
    The browser does bilinear scaling using 2x2 sampling. PixiJS can do bicubic scaling using 4x4 sampling, which results in a much smoother scale. I explain a little about how to set up here.
  11. 8 points
    Hey everyone I have another SVG quick tip for your text elements. If you need it to slice, explode, shatter or glitch, you may find this useful. I was recently working on a Halloween animation for a client and we needed to slash some SVG text into pieces. My first instinct was to convert the text to paths and slice it up in in AI, but this text needed to be dynamic so that would be a lot of work. I decided to place the text in a pattern element and create a group of polygons filled with that pattern. That allowed me to create the slashed pieces of text (the polys) and have them fall away. The text is easily changeable with the GSAP text plugin. It proved to be an easy and flexible solution Happy Hallowtween.
  12. 8 points
    Hey fellow GreenSockers, I just wanted to give a big thanks and shout-out to Jack for creating and maintaining the amazing GSAP for us. I know he likes to thank the moderators for volunteering our time in the forum, but we need to send that thank you and positive energy back to the top too. I can’t imagine how I would accomplish my web animations without GSAP. Most of this stuff would be super difficult with plain JS and virtually impossible with **shudder** CSS animations. To illustrate my point, here’s the shameless self-promotion part. My recent demo (4 smashed into one actually) included a rolling square on one menu. As I was working on it, I wondered how I would even roll a square without smoothOrigin? If you could somehow make it work, it wouldn’t be easy. And that feature is just baked into the cake with GSAP! It’s crazy how much use I get out of the DrawSVG plugin too. No getTotalLength() browser inconsistencies. I just calculate some percentages, drop in a couple tweens and I’m done. With the core tools and amazing plugins, how can anyone look at this platform and not immediately join Club GreenSock? It’s astounding how much faster and easier the work is with GSAP. Not to mention that it’s so much fun. The web truly is a more interesting (& animated) place because of GreenSock. Thanks for being awesome Jack!
  13. 8 points
    You can do that by determining velocity of mouse or scrolling, then use that velocity to apply skew. So to determine velocity you can use simple easing and take difference between target and easing value. Here is demo showing original effect based on mouse. This one uses a predefined tween, I set the progress of tween based on eased value. The scroll based effect is a lot more simple as you don't need to use any predefined tween,
  14. 8 points
    Here's a super rough and quick version that I did. You could probably smooth out some of the paths in Illustrator a bit more even.
  15. 8 points
    Hello @Rager and welcome to the GreenSock forum! Its always best to only run your animation when the DOM (HTML and or SVG markup is loaded and ready) and the window is fully loaded (images, links, fonts, stylesheets, js, and other media assets) Try this so you only run your GSAP code when DOM and Window is loaded and ready: // wait until DOM is ready (html and svg markup) document.addEventListener("DOMContentLoaded", function(event) { // wait until window is loaded (images, external JS, external stylesheets, fonts, links, and other media assets) window.addEventListener("load", function(event) { // makes sure it runs after last render tick window.requestAnimationFrame(function() { // GSAP custom code goes here }); }); }); Happy Tweening!
  16. 8 points
    The word React is like the Bat-Signal for @Rodrigo. If we need him, perhaps we just fire up the Rodrigo-React-Signal.
  17. 8 points
    The secret sauce... Wave === Sine.easeInOut
  18. 7 points
    Sure. Don't animate all the things... #banner-message { background: #fff; border-radius: 4px; padding: 20px; font-size: 25px; text-align: center; /* transition: all 0.2s; */ margin: 0 auto; width: 75%; } CSS and JS can't animate the same properties. If you need CSS transitions on an element you're animating with JS, you should explicitly list those properties. Using "all" can also impact performance because the browser has to watch for changes to all those properties. Also, there's no such thing as an int or float type in JavaScript. Only "number". if ( arguments.length >= 5 && (typeof(speed) == "float" || typeof(speed) == "int") ) { Settings.speed = speed; }
  19. 7 points
    That's not exactly a trivial task, but here's my crack at it: I built it out with ratios and variables to make it easier to port to whatever you're doing "for real". Does that help?
  20. 7 points
    Hi @elpeyotl, Inline SVG means many lines in the HTML, but is great to work on and looks perfect: Happy masking and tweening ... Mikel
  21. 7 points
    Hi Tiago, I made a pen simulating the transition of the site you mentioned. But first I think it is interesting to make some observations: 1) When you instantiate the Timeline and nest the Tweens one underneath the other, it is not necessary to put the name of the object every time, you can insert it only once. Like this: let tl = new TimelineMax() .to(...) .to(...) .to(...) // or let tl = new TimelineMax(); tl .to(...) .to(...) .to(...) 2) Since you are animating empty elements, I believe it is easier to animate using scale or xPercent, which will use transform () and have better perfomance than animating Left property 3) When you use Codepen you can insert the libraries directly into the Javascript Session, it becomes easier to manage the libs. Will take that to help you somehow. This pen:
  22. 7 points
    I have been using BarbaJs on some recent projects, and I have been through this same challenge. The solution I found to redefine the elements for the initial states is to use the BarbaJs Views system (see how it works at this link). Then when rendering the new Container you can use the ClearProps or TweenMax.set or TweenMax.fromto, in the event: let Homepage = Barba.BaseView.extend({ namespace: 'homepage', onEnterCompleted: function() { TweenMax.fromTo($el, time, {stateInitial},{stateTarget}) } }); Homepage.init(); I hope this helps you. Any questions just ask.
  23. 7 points
  24. 7 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
  25. 7 points
    It's hard to say without seeing it. Please make a simplified demo showing the problem.
  26. 7 points
    I wasn't thinking about an eye when I posted my response. Resizing the movement vector if it exceeds a certain radius is one way you could correctly handle diagonal cases.
  27. 7 points
    @OSUblake is right on, of course. And if you simply want to remap a wider/narrower x/y range to another, here's an example of using a tween's progress accordingly: That's not really what I'd use for an eye-following thing because it's not actually measuring things with true angles from the center of a circle (so it goes off the edges at the diagonals), but I was trying to keep things as simple as possible to demonstrate the concept. You basically create a tween for the x-axis and another for the y-axis and that goes from left to right (or top to bottom) and then simply remap the ratios, like if you're basing it on the mouse position across the whole screen width/height (or whatever). Of course you could tween the progress of another tween too if you want things to animate/ease to the new position. If you need help with that, let me know. Happy tweening!
  28. 7 points
    @DD77 Craig and Pedro have done a great job in trying to help you figure out problems in your project. Though I would like to intervene because we can't spend so much time on a single question. We try to keep this forum focused on GSAP API related questions only. We occasionally do help members a bit more but with the intentions that they will use it as example to learn from and can expand it into what their desired goal is. I get it that you are using GSAP but still all of your questions are related to general JavaScript. Now to use GSAP or any animation library you need strong foundation of CSS and JavaScript basics so you can position your elements how you like and make them interactive through JavaScript. We don't resources to answer and explain JavaScript related questions. We have already provided you some helpful resources that will help you build your foundation. And we would be happy to point you to more resources to learn from if you need. We also have a sub forum where you can post to hire a freelancer to help you with your project. Or you can also look for a personal instructor. Feel free to post your requirements at the following link: https://greensock.com/forums/forum/15-jobs-freelance/ Hope this will help you resolve problems in your project. All the best.
  29. 7 points
    Hi, After many questions here, now it's time to see the result : https://jaiunsite.com/ thank you gsap !
  30. 7 points
    BTW @elegantseagulls I've noticed how much you've been jumping in and participating around here. I think that's fantastic. The forum always benefits from additional ideas and fresh eyes on projects. Keep up the good work.
  31. 7 points
    An easy way to keep things random is to create a new animation when the current one finishes.
  32. 7 points
    Probably a displacement map. Here's a good thread in which @OSUblake has a cool shader example. If you search the forum (or Google) for canvas, Pixi or displacement maps, you'll find some cool stuff. Happy tweening.
  33. 7 points
    The first part inside the object is key and second part is value, so you need to use ternary operator in value part. .to("#square", 1, {backgroundColor: window.innerWidth > 736 ? "red" : "yellow" }); Also, by declaring timeline outside of function you were adding all tweens to same timeline even though you won't be reusing them.
  34. 7 points
    Hi and welcome to the GreenSock forums. As far as I know there is no Motion Blur Plugin for GSAP, unless a new plugin was released and I didn't even heard about it This issue is most related with the hardware than anything else. I'm pretty sure that with a last generation quad core machine with some solid GPU this wouldn't be a problem, while with a mid-range phone is more noticeable. The main solution for this is make your animation shorter. If that is not an option you can use WebGL to render the image and animate it's scale: http://www.pixijs.com/ GSAP has a PIXI plugin, so you can use that to easily animate the scale of a PIXI Sprite, although the scale of a PIXI display object can be animated directly with TweenLite, without the use of the plugin: const mySprite = new PIXI.Sprite.fromImage("path/to/your/image.jpg"); TweenLite.to(mySprite, 10, {scale: 2}); Finally I'm curious of why you're using force3D: false in your pen, it should be true in order to send the layer to the GPU and perhaps get a better result: TweenMax.fromTo("#img", 10, { transformOrigin:'50% 50%', scale:1 }, { scale: 2, ease: Power2.easeInOut, force3D:true }); I've done a few things in PIXI, including long, full-screen image animations with very good results, so perhaps you can give it a try. Here you can find some examples to get you started: https://pixijs.io/examples/#/basics/basic.js Finally if you want to try the bonus plugins in CodePen here you can find the links to use them: https://codepen.io/GreenSock/pen/OPqpRJ?editors=0010 Happy Tweening!!
  35. 7 points
    Hi Kerstin, You have pretty much answered your own question. And you have scaffolded your code in your example nearly all completely correct. First I have a question: is there any reason why you are doing a querySelectAll on your toggles? Is this because you plan to have several toggles? As to what you need to do to achieve your desired effect is simply to create the animation you want to play in your 'tlback' and change your click event to something like the following: // This really should be outside your forEach loop let open = false; function accordionToggle() { // Note the zero inside the method call, to make sure we always start the timeline from its start open ? tlback.play(0) : tl.play(0); // Toggle the open state to its opposite value open = !open; }
  36. 7 points
    I like that - a new tagline for GSAP
  37. 7 points
    If you can make it, GSAP can animate it. All that site is doing is animating a bunch of coordinates. A very simplified example.
  38. 7 points
    My suggestion would be to use a 'snap'. You can get your current X position by using `this.x` in your `onCubeDrag()` function. From there you should be able to math the difference for what the 90deg snap should be. If I have time this morning I'll see if I can fork your pen and dive into the details a little deeper.
  39. 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.
  40. 7 points
    I love a challenge, so I took a crack at it here: Notice that it skews in a more natural way based on where you grab it, so if you grab the top, it'll skew in the direction you pull and if you grab on the bottom, it skews the other way so that it feels like it's being pulled by the mouse similarly. It uses a proxy as well as velocity tracking. I made it stop immediately whenever the user presses down while it's moving too, killing that lerp stuff. Hopefully it feels pretty natural. Does that help?
  41. 7 points
    Nope. .checked is a property of the input. :checked is a pseudo class representing the state of the input, and would be applied based on the value of the property. I'd imagine it would be pretty easy to get past a "I'm not a robot" checkbox in a CAPTCHA if all a spammer needed to do was apply a pseudo class.
  42. 7 points
    Hi @Kalimeromax I don't think a master timeline is a good idea for what you're doing. All your timelines repeat, but with different durations, so they aren't synced with each other. And the infinite repeat creates another issue. When you reverse a timeline, it's going to play in reverse for however long it has been playing forward i.e. its .totalTime(). That's why some of your reverse animations take longer than 1 second to complete. See if this is more of what you were going for. On hover enter, I adjust the totalTime as if the animation where on its first iteration.
  43. 7 points
    Hi and welcome to the GreenSock forums. Thanks for the demo. That's a pretty cool way to make a rotating sphere. The API makes it pretty straightforward to detect the midpoint of an animation. For any given animation you can query its duration() or progress() to get the "halfway" or mid point var tween = TweenMax.to(something, 10, {x:100, ease:Linear.easeNone}); to start another animation when that tween is in the middle you would schedule it start at a time of tween.duration() * 0.5 //or tween.progress(0.5) And, yes I'd use a timeline to schedule one tween to start at the midpoint of another. An issue with your setup is that your elements are dispersed all over the globe initially and each rotate 360 from their current position. So let's say an element is exactly behind the globe, if you fade it out halfway through its animation it will fade out when it is in front of the globe. no good. My first step was to set up every element in a vertical half-ring around the front of the globe and get them all to rotate the same way and fade out at the same time once I got that working I then randomized the started progress of each elements timeline using progress(Math.random()) A big component to this is using a SlowMo ease with yoyoMode set to true at the right time to get the elements to fade out and back in. https://greensock.com/docs/Easing/SlowMo I could probably take 2 hours explaining all this, but hopefully this gives you something to play with and tweak. --- Another approach might be to use an onUpdate callback to map the current rotationY to a range of opacities so that its opacity will be a factor of its rotation.
  44. 7 points
    Hi @cgorton How are you making out? I didn't recognize you without a avatar. Learning the basics of canvas isn't that hard. Instead of declaring what you want the browser to display with CSS and markup, you write instructions to draw stuff. It works a lot like Logo programming (turtle graphics), which is a programming language for children. You tell the turtle where to go with very simple instructions/commands. With canvas, the context is the turtle, and that's the only thing you can really interface with. https://turtleacademy.com/lessons/en Having only 1 object to work with can be quite limiting, so the solution it to create your objects to work on. If you had some CSS and an SVG... <svg> <style> #rect { fill: #2196F3; fill-opacity: 0.5; stroke: #111; stroke-width: 2; } </style> <rect id="rect" x="20" y="100" width="200" height="150" /> </svg> ... it could be represented as a simple object like this. var myRect = { x: 20, y: 100, width: 200, height: 150, fill: "#2196F3", fillOpacity: 0.5, stroke: "#111", strokeWidth: 2 }; Now you can tween that object as if it were an a real element. If it's a number, GSAP can animate it. The properties you use and how you name them is entirely up to you. The context has no concept of your objects, so do what makes the most sense. You can also make optimizations by reusing objects. Notice how the line has 3 different strokes applied to it. With SVG, that would require 3 different elements. The only way to end a path is to call context.beginPath(), so you can keep applying different styles to the same path. If you haven't already, check out these threads. CSS tricks. It's a little advanced, but it shows some nice rendering techniques. https://css-tricks.com/using-gsap-animate-game-ui-canvas/ I would also recommend going through every property and method on MDN. It's very helpful, and most of the pages have demos. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D MDN also has some pretty good tutorials. Some of the stuff is dated, but it's fine if you're just getting started. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
  45. 7 points
    SVG is not optimized the same way HTML is. GPU acceleration for SVG is very limited or non-existent. It depends on the browser and operating system. Again, SVG is not the same as HTML. There is no box model in SVG. Everything starts at 0,0. So what's better for performance? I got into a discussion about the performance of vector graphics on an issue for PixiJS. This is a response from an engineer at Mozilla about some of the SVG demos in that issue. https://groups.google.com/forum/#!msg/mozilla.dev.tech.svg/bt_Wn-5ygxs/QWLFBpjHBwAJ tl;dr Transforms are optimized for better performance, but there's a memory limit. If performance is an issue, use canvas.
  46. 7 points
  47. 7 points
    Try making it more challenging. Maybe start with indirect fire using a paladin. ( @mikel knows what I'm talking about 😉) Then you could add in a goal, like having to kill the enemy within a certain amount of time. Indirect fire is a core game mechanic in Worms. Really fun! You can animate a projectile along a parabolic path using the Physics2DPlugin. https://greensock.com/docs/Plugins/Physics2DPlugin And for very simple collision detection between the projectile and the enemy, you can use Draggable's .hitTest() method. https://greensock.com/docs/Utilities/Draggable/hitTest
  48. 7 points
    Don't animate transform as it will undo the matrix. Hint, a matrix does rotation using scale and skew, which explains the weird behavior. TweenMax.to('#wheel', 1, { rotation: rotateDeg }); But I don't know if that is the correct behavior. You can rotate something more than 360 degrees... and it can be negative. You might want to look at the DirectionalRotationPlugin, which is baked into the CSSPlugin. https://greensock.com/docs/Plugins/DirectionalRotationPlugin This will rotate it the shortest distance. TweenMax.to('#wheel', 1, { rotation: rotateDeg + "_short" });
  49. 7 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 }); }
  50. 7 points
    Looks like they're using canvas for that effect. @Sahil has a nice demo and tutorial about canvas mouse follow in this thread: You could make it happen with SVG too, but canvas would probably be a bit easier in this case. Good luck and happy tweening.
  • Newsletter

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