Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 07/11/2018 in all areas

  1. Hehe @Rodrigo your code is the same as mine! I was also positioning everything from the center. Using the center with SVG and canvas elements makes everything so much easier.
    5 points
  2. 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 }); }
    5 points
  3. Hi @francis789 I'd recommend width/height instead of scale for those images. I don't understand what the lines should be doing. Should they be drawing on with drawSVG? I see your pen loads the drawSVG plugin, but there are no tweens that use it so I wasn't sure. You'll also see that I condensed your code down to two tweens. Rather than a separate tween for each ID, you can target all the lines and all the images at the same time. It's much easier to manage. Hopefully that helps. Happy tweening.
    4 points
  4. Hi @PaoloDoma Are you looking for such an effect? And just for fun: Happy tweening ... Mikel
    4 points
  5. A <g> element has no real position or size. It's defined by its children. That's why positioning everything at 0,0 and using the center works so well. If any children of a <g> cause the position or size to change i.e. its bounding box, everything will remain anchored around the center point. And you can't drag a nested <svg> element because transforms won't work on it, so you'll still need to use a <g> element somehow.
    4 points
  6. You're setting as the target of the Draggable instance the element with the id="box". It should be the patch element. var line = document.querySelector("#line"); var patch = document.getElementById("patch_218_454"); var x1 = line.x1.baseVal.value || 0; var y1 = line.y1.baseVal.value || 0; var x2 = line.x2.baseVal.value || 0; var y2 = line.y2.baseVal.value || 0; var C = x2 - x1; var D = y2 - y1; var distSq = C * C + D * D; /* TweenLite.set(patch, { xPercent: -50, yPercent: -50 }); */ var draggable = new Draggable(patch, { allowContextMenu: true, liveSnap: { points: getClosestPoint } }); /* TweenLite.set(patch, getClosestPoint({ x: draggable.x, y: draggable.y })); */ draggable.update(true) That allows the patch to be dragged, but it throws the live snapping far from the line. I'm not sure why is that, perhaps the fact that you have an <svg> tag inside another <svg> tag. The code is making the calculations in the context of the outer SVG tag and then those are being applied in the inner SVG tag, which causes that issue. I haven't seen something like that before; any particular reason for that? Also you don't need throwProps for this, so you can remove it from the Draggable instance. Happy Tweening!! PS: Well... basically what Blake said , He beat me to it
    4 points
  7. 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.
    4 points
  8. 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); }
    4 points
  9. Aha! It looks like codepen is using a different domain for that content. I just updated the plugin to allow that one (whitelisted it). You should be good-to-go now (after clearing your cache). Better?
    3 points
  10. I'm not 100% sure, but you mentioned a shooting star with lines between the stars, so I think your lines should be following each of the images? Some of the lines in your demo are drawn backwards so I just made a simple version with 5 circles and lines. Is this the type of effect you're after here? Hopefully that helps. Happy tweening.
    3 points
  11. I'm not sure what the question is here. Are you asking how to repeat a TimelineLite? If that's what you need, please try this: var Tween = new TimelineLite({ onComplete: function() { this.restart(); } }); Hopefully that helps. Happy tweening.
    3 points
  12. is perfect! what was missing me was the wrapper with hoverflow hidden Thank's Paolo
    3 points
  13. Remember this? All your images start off scaled from a different origin, so your transform origin is throwing everything off.
    2 points
  14. I ended up importing the plugins in nuxt.config.js like this: head: { script: [ { src: '/DrawSVGPlugin.min.js' } ] }, and placed the plugin file inside the static folder (ih the root directory) . This method also works with nuxt generate.
    2 points
  15. It's much easier to work with SVG when elements start at 0,0 coordinates, which is what my demo assumed. The patch should be in the very top-left corner, but it's not. Fix that and it should work just fine. Also, the line element doesn't have to be a real element. You can plug in your own values from your data for x1,y1,x2,y2 if you want.
    2 points
  16. Is this the effect you're after?:
    2 points
  17. I’m looking for talented developers with high animation skills. I work for an agency specialized in developments of campaigns for big brands. These are good examples of the quality we are looking for: https://bannerboy.com/brain/?post=converse-chuck2-knit-320x480 https://bannerboy.com/brain/?post=google-gsp16-bike-300x250 https://bannerboy.com/brain/?post=duracell-gamer-halo-300x250 For more information please send me an email here with your portfolio. thanks!
    1 point
  18. Maybe with canvas. PixiJS is a good choice, and it supports bitmap fonts. http://pixijs.io/examples/#/demos/text-demo.js A star explosion... But that could be better. I'd break the text up into little shards to create an effect kind of like this.
    1 point
  19. Wow that was fast! It all works now - thanks a lot!
    1 point
  20. Ok, I just needed the ThrowPropsPlugin.min.js. Thanks !
    1 point
  21. The whole types thing is screwy, but there are 2 different versions. @types/greensock is the old version which has the conflict. https://www.npmjs.com/package/@types/greensock @types/gsap is the newer, but still incomplete version. It shouldn't have that problem as the Animation class is now inside a "gsap" namespace. https://www.npmjs.com/package/@types/gsap
    1 point
  22. Thanks for the replies OSUblake, I appreciate them. Thanks for the comment "Are you sure waiting for the page to completely load is a good idea?", not sure why I didn't think about this thoroughly. It does sound like a bad idea actually since there is likely the will be staring at a blank page as you pointed out. I'll probably take another approach with this—like having just the panels fade-in or something—, or drop it entirely.
    1 point
  23. @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
    1 point
  24. 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.
    1 point
  25. 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
    1 point
  26. 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.
    1 point
  27. 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.
    1 point
  28. @OSUblake How geometrically elegant, a true heir of Pythagoras
    1 point
  29. First of all, thanks for joining the club, @Sixtus. As I stated above, I'm not at all familiar with Nuxt, but are you using the files from the "bonus-files-for-npm-users" directory in the download zip? If you're still having trouble, it may help if you create a reduced test case and provide it here so that folks can see what's going on.
    1 point
  30. GSAP is not going to help you out much here. You have to find the angle from the absolute transform origin to the mouse for every thing you want to rotate. var dx = mouse.x - origin.x; var dy = mouse.y - origin.y; var transform = "rotate(" + Math.atan2(dy, dx) + "rad)"; element.style.transform = transform; So something like this, although I'd probably use canvas for this many elements.
    1 point
  31. Great to hear you've been a long-time user/supporter. And yes, I agree - we need to get out and connect with the community more. We've been hunkered down focusing on making the animation platform as solid as possible, and we're about to launch a completely redesigned web site which took way longer than it should have Hopefully we'll get some time to connect more soon. Yes, GSAP for HTML5/JS has gotten the lion's share of our devotion for the last couple of years because our customers have made it pretty clear that it's where they need the tools the most. I must admit that it's a lot of fun too. I really enjoy it (well, once I got over the "oh my gosh I can't stand browser inconsistencies" phase). I'm near Chicago and Carl is near New York. No, Adobe never bought us, but we talk with them regularly They've got some cool people there. And nobody builds a better GUI. Carl and I are full-time devoted to building these tools and supporting them, answering questions, refining things, training, etc. This is NOT a side-project. In fact, I work an insane amount of hours. My body is slowly adjusting to a consistent state of sleep deprivation. Thanks for the suggestion about the "behind the scenes" stuff. I think that's an excellent point. Sometimes we're so focused on the tools themselves that we neglect the more personal side of things. We really owe all the success to supporters like you who take an interest, recognize the hard work we've put in, and spread the word. So thanks. Happy tweening (and loading)!
    1 point
  32. Hi, Well depends on what your loading into your page. The most reliable method I know is use the window.onload event handler; this one is triggered once everything in the DOM is loaded, ie, scripts, text, images, etc.. You can create all your tweens and timelines and start them with window.onload. In this case my recommendation will be to nest as much as you can, ie, put as many tweens and timelines inside one parent timeline or in as few as possible to get a better and simpler control of your animations. It'll be like this: var masterTimeline = new TimelineMax({paused:true}), tl1 = new TimelineMax(), tl2 = new TimelineMax(), tl3 = new TimelineMax(); //Populate your timelines tl1 .to() /*...*/ .to(); tl2 .to() /*...*/ .to(); tl3 .to() /*...*/ .to(); masterTimeline.add([tl1, tl2, tl3]); window.onload = function() { masterTimeline.play(); } Also you could concatenate or adjust the sequence in which your tweens/timelines play with callbacks, check Carl's video tutorial on sequencing: http://www.greensock.com/sequence-video/ If you're dealing with images and you want to load all the images window.onload also could be the solution but if you're looking for something more fancy take a look at David DeSandro's images loaded. Is a very nifty way to preload your images and it has it's own callbacks which is very useful for this cases: http://desandro.github.io/imagesloaded/ Hope this helps, Cheers, Rodrigo.
    1 point
×
×
  • Create New...