Popular Content

Showing content with the highest reputation since 07/12/2018 in Posts

  1. 6 points
    Join Club GreenSock... https://greensock.com/club That's what the ScrambleTextPlugin does. https://greensock.com/ScrambleTextPlugin
  2. 6 points
    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.
  3. 5 points
    Your SVG is almost 4,000 lines of code with 10,000 DOM nodes. A lot of it doesn't even look important, like all these empty path coordinates. <path fill="#C9D0D2" d="M637.1,397.9C637.1,397.9,637.1,397.9,637.1,397.9C637.1,397.9,637.1,397.9,637.1,397.9 C637.1,397.9,637.1,397.9,637.1,397.9C637.1,397.9,637.1,397.9,637.1,397.9C637.1,398,637.1,398,637.1,397.9c0,0.1,0,0.1,0,0.1 c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0 c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0 c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0 c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0 c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0 c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0 c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0 c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0 c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0 c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0 c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0 c0,0,0,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0,0,0-0.1,0c0,0,0,0,0,0c0,0,0,0-0.1,0 c0,0,0,0,0,0c0,0,0,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1-0.1c-0.5-0.3-0.8-0.7-0.8-1.1l0.6,7.5c0,0.8,0.4,0.8,1,1 c0.6,0.2,1.3,0.2,1.9,0.1c0.7-0.1,1.1-0.2,1.1-1L637.1,397.9C637.1,397.9,637.1,397.9,637.1,397.9z"></path> You might want to run your SVG through an optimizer, like SVGO. https://jakearchibald.github.io/svgomg/
  4. 4 points
    Hi @jiggles78 I'd recommend focusing on one animation piece at a time and try to recreate it. It's like the old saying: "You eat an elephant one bite at a time." Eventually all those little animations will make a great website. I don't know of any tutorials that will take you through every aspect of the showcase sites, but Petr Tichy has a deconstruction playlist on his YouTube channel. You may find it helpful. https://www.youtube.com/user/ihatetomatoesblog/playlists Hopefully that helps. Happy tweening.
  5. 4 points
    Thanks for the demo. To answer the first question, the reason the staggerFromTo() animation on the text was happening too early was because you had the "complete" function in the place of the position parameter. bad: complete is in the wrong place so the position gets set to an absolute time of 0 tl.staggerFrom(chars, .42, {opacity: 1, scale:.01, y:0, rotationY:360, ease:Back.easeOut}, .04, complete); good: using the position parameter of "+=0" means add this 0 seconds after the previous animation has ended. You normally don't need position of "+=0" because its the default value, hower since you are using the onCompleteAll parameter, you need to put something in for the position tl.staggerFrom(chars, .42, {opacity: 1, scale:.01, y:0, rotationY:360, ease:Back.easeOut}, .04, "+=0", complete); I added a background color to the menu so that its easier to see what is happening
  6. 4 points
    When you load an svg like that you can't access the internal paths and shapes of the SVG. If you want to keep your markup clean you will have to inject the SVG data into your document. Please see solutions offered here:
  7. 4 points
    I think you're looking for the ThrowProps plugin. https://greensock.com/throwpropsplugin Docs: https://greensock.com/docs/Plugins/ThrowPropsPlugin It's a Club GreenSock member perk. More info: https://greensock.com/club Happy tweening.
  8. 4 points
    Hey fellow GreenSockers, A quick tip for animating SVG text by character. Have you ever wanted to animate the individual characters of some SVG text? SplitText is a fantastic plugin but doesn’t work with SVG text nodes. You can wrap your individual letters in <tspan> elements, but that doesn’t give you a whole lot of control or options. However, you can break a string into individual characters, add them to individual text nodes and line them up in the SVG so they look like a complete word. You can now control the animation for each character and you have almost every animatable property available to you. It’s certainly not as good as SplitText but can work well when you need it. Happy tweening.
  9. 4 points
    I would say use draggables events instead as it will keep things organized, check docs for equivalent events. If you still want to use event listeners of your own then you need to set "allowEventDefault" property to true while defining the draggable.
  10. 4 points
    Because you're just checking if there something called "mouseover" on a jQuery object, which there is. It's called a truthy value. https://developer.mozilla.org/en-US/docs/Glossary/Truthy // Try it console.log(Boolean($(".scale").mouseover));
  11. 3 points
    <script src="./thirdparty/TweenLite.js"></script> <script src="./thirdparty/plugins/MorphSVGPlugin.js"></script> <!--this MUST be loaded after the plugins for GSAP\Tween--> <script src="./thirdparty/require.2.1.4.min.js"></script> Got 'er fixed. Thank you for the response! Sorry, it was Friday at 3:30, I was frustrated, and the idea of breaking out my simple project was lost in "don't punch the screen, don't punch the screen". Basically requirejs needs to be loaded after the es5 stuff. Before, and it doesn't know what to do. Now if you'll excuse me, I have a date with a stackoverflow response.
  12. 3 points
    Hi @bignose Welcome to the forum and thanks for joining Club GreenSock. If I understand your question correctly, you'd want to use the position parameter on the autoAlpha stagger tween. Your first stagger duration is 1 second so you can set a position parameter of 1 second on the autoAlpha stagger and it will start when the first element in the first stagger tween completes. tl.staggerFrom("grid-item", 1, { y:-10 }, 0.3); tl.from("grid-item img", 1, {autoAlpha:0 }, 0.3, 1); More info about the position parameter: https://greensock.com/position-parameter Hopefully that helps. Happy tweening and welcome aboard.
  13. 3 points
    Welcome to the forum. There are numerous threads about parallax available. You can use the forum search feature to find quite a few. Here are some to get you started. Happy tweening.
  14. 3 points
    Just to add a little more to @Carl's excellent advice and information: //You have this on line 8 menuLinks = $('#menuLinks') // then you're using it for your each() loop on line 32 menuLinks.each(function(index, element){ However, that is a class, not an ID so you need to change your variable to menuLinks = $('.menuLinks') If you make that switch, you'll be able to target those links in your animation. The other issue is you are setting some hover colors in your CSS, but your timeline tweens are trying to animate color. That won't work correctly. I'd recommend removing the hover color in the CSS and letting GSAP take care of that for you. If you want the strike-though to animate, you'll have to add an element to each of those <li> tags. It could be a pseudo element or an absolutely positioned div and animate its width on hover. Here's a fork of your pen with some changes. I added a simple opacity to the hover timeline so you can see that it is working. You'll have to decide what to do about the hover colors. I also commented out line 32 as I had no idea what it should be animating. It's targeting child menuLinks of the menuLinks, but there are none so I wasn't sure why it was there. Hopefully that helps. Happy tweening.
  15. 3 points
    Sorry, I really don't know what your site is supposed to look like or what it is supposed to do. I looked at the homepage and didn't see any errors. We really have to keep our support focused on the GSAP API. Kind of tough to trouble-shoot why a live site isn't loading properly.
  16. 3 points
    Remember this? All your images start off scaled from a different origin, so your transform origin is throwing everything off.
  17. 2 points
    Sounds like a loading problem. You said external SVG. Are you injecting it into the DOM? You may want to take a look at this thread. Hopefully that helps. Happy tweening.
  18. 2 points
  19. 2 points
    Thanks Craig! Although, I was able to read and watch tutorials about positioning parameters before, it turns out that my animation offsets were a bit off. I'm still getting the hang of it. Thanks again, and GSAP is fantastic.
  20. 2 points
    Is there any way you could create a more reduced test case without all the steps necessary? I tried clicking on the "This triggers the alert overlay" button and immediately got a JavaScript error: Same thing when I click on the perimeter overlay button. Maybe I'm totally misunderstanding the directions. I read your question about 4 times and it's still pretty fuzzy to me what exactly you want to happen or how that corresponds to the 60-ish lines of code. It looks like you've embedded a function call into your timeline, and that function creates a whole new/different timeline that infinitely repeats. So every time you play that first timeline again, it's triggering that function call which creates another timeline again...and again...(each time) and you're likely getting overwriting or odd starting positions based on the timing of clicks. That's not a problem with GSAP, though - that'd be just a logic issue in the code. For example, if the infinitely repeating animation is halfway through one of its iterations when that function gets called and the [redundant] animation is created, it'd start from the current values at that time (which are halfway through an iteration). See what I mean? Just looking at the code, I get the strong impression that there are just some logic issues and there's likely a much cleaner way to structure your animation logic but I'm not entirely sure how to advise you because I don't understand all the goals and requirements. Again, a very simplified example of just a part of this would be super helpful, and then you can build up from there. In other words, try baby steps first rather than attempting to wedge every ounce of functionality into the logic in the first place.
  21. 2 points
    You have right. Relative percentage values did it. Layout trashing is gone. We now see other improvements but they are not connected to GSAP. Thank you so much. Best regards, Michal.
  22. 2 points
    It looks like you must be doing percentage-based transforms which isn't supported in browsers natively (at least according to the SVG spec from what I understand), thus GSAP must perform those calculations. Do you really need to use percent-based transforms? Maybe try doing the conversion initially yourself and feeding in px-based values instead. GSAP could, of course, just do the initial conversion and never query getBBox() again, but that would break if the size of the element changes at all during the tween. See what I mean? So GSAP must take a cautious (reliable) approach rather than just assuming that the size won't change. But if you, as the developer, know that you're not going to change the size during the course of the tween, you could just figure out the value in terms of px (or SVG units actually) and feed that in instead. See what I mean?
  23. 2 points
    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.
  24. 2 points
    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!
  25. 2 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 }); }
  • Newsletter

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

    Sign Up