Jump to content
Search Community

Leaderboard

Popular Content

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

  1. Join Club GreenSock... https://greensock.com/club That's what the ScrambleTextPlugin does. https://greensock.com/ScrambleTextPlugin
    5 points
  2. 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.
    4 points
  3. 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.
    4 points
  4. 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));
    3 points
  5. 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/
    3 points
  6. 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.
    2 points
  7. 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.
    2 points
  8. Hi @lucrampro, GSAP certainly works well with jQuery ... but it looks like you're using jQuery incorrectly (if I understand what you want to accomplish). It looks like you want to respond to mouseenter and mouseleave ... simply a hover event. $(".scale").hover( function(){ TweenMax.to( $(this), 1, { css: { scale: 2, backgroundColor: "#343434" } }); }, function(){ TweenMax.to( $(this), 1, { css: { scale: 1 } }); } ); EDIT: Sorry @OSUblake, didn't see that we were responding at the same time
    2 points
  9. 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.
    2 points
  10. 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?
    2 points
  11. looks like there's some action on this one. here is another demo. https://codepen.io/GreenSock/pen/YjXxrz?editors=0010
    1 point
  12. if ($(".scale").mouseover) { ... will always return true because it will return all matching element properties ( i.e not return FALSE )
    1 point
  13. Remember this? All your images start off scaled from a different origin, so your transform origin is throwing everything off.
    1 point
  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.
    1 point
  15. 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.
    1 point
  16. Absolutely. Just pause the initial timeline and use the user's calculated scroll position (scroll distance/container height) to get a number from 0 to 1 and continually use that update value to set the timeline's progress() value. If you're already using jQuery, something like this var tl = new TimelineLite( {paused: true} ); $(window).scroll( function(){ var st = $(this).scrollTop(); var ht = $( '#some-container' ).height(); if( st < ht && st > 0 ){ windowScroll = st/ht; tl.progress( windowScroll ); } }); Of course with some actual animations happening on the timeline
    1 point
  17. Yep, the browser is applying some funky custom kerning, but refuses to do so when something is wrapped in a <div> or even <span>. I can't think of anything we could do in SplitText to fix that. Have you tried adding this to your CSS?: font-kerning: none;
    1 point
  18. Using a steppedEase you can offset the position (or backgroundPosition) of an image in equal increments Here is a crude, yet helpful demo https://codepen.io/GreenSock/pen/vLFmd?editors=0010 SteppedEase docs: https://greensock.com/docs/#/HTML5/Easing/SteppedEase/
    1 point
  19. EDIT: Notice that a flicker may appear in some of these demos. This a hardware acceleration bug Chrome. You don't need any smoke and mirrors for this. You can create circular motion using Sine.easeInOut, and circular motion is a wave... Look what happens when you plot the x and y values separately. Beautiful waves! Here's how you can do that with SVG. I'm just animating a bunch of SVGPoints on a polyline that are set to slightly different progress values. The amplitude is the height of the wave. The frequency is the distance between waves. And the number of segments is how many points will be added to the polyline. You don't want too many as that can make your animation run slower. Just enough so it looks smooth. You can animate the amplitude and frequency by applying an ease to them. Every ease has a .getRatio() method, which you can use to get the easing value. So if you wanted to animate the amplitude, you could do something like this... point.y = amplitude / 2 * Power1.easeIn.getRatio(norm); To make things interesting, I wanted to test out the CustomEase tool that's going to be coming out soon. I came up with a simple ease that looks like a bell curve, so it starts and ends at 0. Here's how that looks when applied to the amplitude. You can also apply an ease to the frequency/progress value, and even change the shape of the wave. If you reverse your animations, the smooth wave connection gets flipped, creating a pretty interesting sawtooth wave. Related post with other rendering options...
    1 point
×
×
  • Create New...