Popular Content

Showing content with the highest reputation on 10/23/2018 in Posts

  1. 3 points
    Welcome to the forums, @Mntad. It's tough to diagnose a live site like that, but I'd make two suggestions: Make sure you're using the latest GreenSock files. It looks like you're using a file that's REALLY old (2014). Try creating a reduced test case that demonstrates the issue, hopefully in something like codepen so that we can tinker around and see exactly what's going on. You are writing the rules exactly as you have them in the CSS, right? Also, you might want to check this out: https://stackoverflow.com/questions/48753691/cannot-access-cssrules-from-local-css-file-in-chrome-64/49160760#49160760
  2. 3 points
    It looks like you were creating a new tracker on every single onDrag event. You should just create a tracker once and it "watches" that property on that object from that point on. It's super wasteful to constantly be creating new ones, and they wouldn't have a chance to collect any data about the velocity yet when you're trying to query it. I assume this is kinda like what you were after, right?:
  3. 2 points
    Hello @Mntad and welcome to the GreenSock Forum! Usually that error happens because your GSAP getRule() code is running before your CSS your trying to reference in your GSAP code CSSRulePlugin.getRule(). So if your JS is trying to getRule() that hasnt been loaded in to memory then you will get that error about accessing the CSS Rules. I notice you have a DOM ready your checking before running your code. You might want to put a window load event inside your DOM ready event. The reason being is that DOM ready doesnt check for external CSS files being loaded. That check happens with the window load event which makes sure all external aseets like images, links, fonts, CSS stylesheets, and JS scripts are loaded. Try this since your using jQuery to make sure your code doesn't run until all assets a have been loaded: // wait until the DOM is fully loaded (html, svg, markup etc) $(document).ready(function() { // wait until all external assets are loaded (css stylesheets, js scripts, fonts, images, etc) $(window).bind("load", function() { // custom GSAP code goes here }); }); Happy Tweening!
  4. 2 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.
  5. 2 points
    Yeah, sometimes it can be hard to come up with a good compromise for all the different devices and displays. You could also make the ratio conditional so regular displays won't use a higher resolution. var two = new Two({ autostart: true, fullscreen:true, type: Two.Types.canvas, ratio: window.devicePixelRatio > 1 ? 1.5 : 1 }).appendTo(document.body);
  6. 1 point
    If you can make it, GSAP can animate it. All that site is doing is animating a bunch of coordinates. A very simplified example.
  7. 1 point
    Hi again, To me this looks unrelated to GSAP since i'm seeing a lot of errors that happen before GSAP gets run. It looks like you have some cross domain policy security issues going on in your site. Your trying to bring in scripts from another domain which is triggering the browser sandbox security for the same origin policy https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy I see tons of errors not related to GSAP, that is why your having issues: Loading failed for the <script> with source “https://ipinfo.io/?token=$ceba260ccc58ec&callback=jQuery33103352061582577478_1540297617591&_=1540297617592”. Content Security Policy: The page’s settings blocked the loading of a resource at https://ipinfo.io/?token=$ceba260ccc58ec&callback=jQuery33103352061582577478_1540297617591&_=1540297617592 (“script-src”) undefined project.js:204 undefined project.js:205 undefined project.js:206 undefined project.js:207 I'll echo what @GreenSock Jack advised if running locally you will need to make sure your using a local testing envirnoment like XAMPP or MAPP so Chrome doesn't trigger its local sandbox for security.
  8. 1 point
  9. 1 point
  10. 1 point
    I took a look at the pens presented in the topic but I confess they are a little above my level of understanding, but I tried to do using the track similar to the way @GreenSock (Jack) uses in his example, but skewX does not render the value of the track, Why? The attempt is below.
  11. 1 point
    That's crazy cool. Nice work!
  12. 1 point
    Thanks so much! @OSUblake😁 Yes, I'm on a Retina display. Lowering the ratio helped a lot, 1.5 was a nice compromise between performances and quality.
  13. 1 point
    I also saw some errors. You need to wrap your calls with a function. function changeStyleTo(style) { if(style == 'fill') { new TimelineMax() .to(prism.fill.stops[0], 0.3, {color: '#3850CF'}, 's1') .to(prism.fill.stops[1], 0.3, {color: '#00FFEE'}, 's1') // .call(prism.noStroke()) .call(() => prism.noStroke()) } if(style == 'stroke') { new TimelineMax() .to(prism.fill.stops[0], 0.3, {color: '#000'}, 's1') .to(prism.fill.stops[1], 0.3, {color: '#000'}, 's1') // .call(prism.stroke = linearGradient) .call(() => prism.stroke = linearGradient) } }
  14. 1 point
    I didn't notice any problems on my computer. If you're using a HiDPI monitor (retina, 4k, 5k, mobile), it's just a lot of pixels to draw. You can try lowering the resolution. It won't look as sharp, but it will run faster. var two = new Two({ autostart: true, fullscreen:true, type: Two.Types.canvas, ratio: 1 // devicePixelRatio }).appendTo(document.body);
  15. 1 point
    @jesper.landberg was working on something like that.
  16. 1 point
    svgOrigin doesn't support percentages. It needs pixel based values. In your case you'd want the center of your SVG. svgOrigin: '37.5 37.5' Does that make sense? Happy tweening.
  17. 1 point
    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!
  18. 1 point
    This is what happens when you tell CSS and JavaScript to animate the same thing.
  19. 1 point
    Yeah, I can totally see why you'd think this is a bug and I suppose it sort of is, but one could argue that it's a bug when it DOES work As @OSUblake said, you're doing something very unusual here in that you're animating completely different types of objects, but remember that technically in order to animate CSS properties you've got to define them in a "css:{}" object so that CSSPlugin takes control of those. However, there's an "autoCSS" feature that senses when the target is a DOM element and then it automatically creates and wraps those "css:{}" values for you (to minimize typing...it's a convenience, as it's so incredibly popular to animate CSS on DOM elements). In your demo, if you had the plain object AFTER a DOM element, what was happening is that GSAP noticed the DOM element and pushed the "x" value into a "css:{}" object as a convenience, so your vars looked like this: {css:{x:200}} Thus by the time it go to the standard object it was trying to animate CSS properties of a plain object (doesn't make sense). Of course a solution for us would be to never edit the original vars object (create a copy for each and every target), but GSAP is HYPER optimized for speed an minimal memory consumption, so that was a design decision we made. A solution would be to keep your arrays homogenous (don't mix plain objects with selector text or DOM elements), or you could technically define BOTH values x: and css:{x:} like this: TweenMax.fromTo([ this.$refs.circle, this.$refs.triangle, this.$data ], 1, { x: 0, css:{x:0} }, { x: 200, css:{x:200} }); But that seems a bit odd to me readability-wise. My personal preference would be to use a different tween for the generic object. Does that help?
  20. 1 point
    Hi @greentoe GreenSock's JavaScript files do not track users, nor do they employ any type of cookies. Cloudfare hosts the most popular JavaScript libraries, on a free, public CDN. GreenSock has nothing to do with that, other than being popular. Does Cloudfare use cookies? Yes. Are all cookies bad? No. Cloudfare uses cookies for security purposes and they cannot be disabled. Privacy Badger is complaining about the cfduid cookie. https://support.cloudflare.com/hc/en-us/articles/200170156-What-does-the-Cloudflare-cfduid-cookie-do- https://support.cloudflare.com/hc/en-us/articles/200169506-Can-I-disable-Cloudflare-cookies- If that's still issue for you, you can use your own self hosted GreenSock files instead of Cloudfare. I would ask whoever created your theme on how to do that. It shouldn't be too hard. I'm not familiar with Wordpress, so I really can't advise on that.
  21. 1 point
    @OSUblake Awesome! exactly what I was looking for! Thanks a lot
  22. 1 point
  23. 1 point
    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?
  24. 1 point
    I was asked yesterday about animating to/from backgroundSize: "cover" or "contain" with GSAP, so I figured I'd share the solution here in case it helps anyone else. The problem: GSAP interpolates between numbers, but how is it supposed to interpolate between something like "300px 250px" and "contain" (not a number)? So I whipped together a function that basically translates "contain" or "cover" into their px-based equivalents for that particular element at whatever size it is then. Once we've got it converted, it's easy to animate. //this function converts the backgroundSize of an element from "cover" or "contain" or "auto" into px-based dimensions. To set it immediately, pass true as the 2nd parameter. function getBGSize(element, setInPx) { var e = (typeof(element) === "string") ? document.querySelector(element) : element, cs = window.getComputedStyle(e), imageUrl = cs.backgroundImage, size = cs.backgroundSize, image, w, h, iw, ih, ew, eh, ratio; if (imageUrl && !/\d/g.test(size)) { image = new Image(); image.setAttribute("src", imageUrl.replace(/(^url\("|^url\('|^url\(|"\)$|'\)$|\)$)/gi, "")); //remove any url() wrapper. Note: some browsers include quotes, some don't. iw = image.naturalWidth; ih = image.naturalHeight; ratio = iw / ih; ew = e.offsetWidth; eh = e.offsetHeight; if (!iw || !ih) { console.log("getBGSize() failed; image hasn't loaded yet."); } if (size === "cover" || size === "contain") { if ((size === "cover") === (iw / ew > ih / eh)) { h = eh; w = eh * ratio; } else { w = ew; h = ew / ratio; } } else { //"auto" w = iw; h = ih; } size = Math.ceil(w) + "px " + Math.ceil(h) + "px"; if (setInPx) { e.style.backgroundSize = size; } } return size; } The only catch is that the image must be already loaded, otherwise it's impossible to figure out the native dimensions of the image (aspect ratio). While it's technically possible to add this functionality into CSSPlugin, it didn't seem advisable because it eats up a fair amount of kb and it's EXTREMELY uncommon for folks to want to animate to/from a background-size of cover or contain. So maybe 0.0001% of the audience would benefit but 100% would pay the kb price. Didn't seem worthwhile, so a helper function like this struck me as more appropriate. Feel free to chime in if you disagree. Happy tweening!
  • Newsletter

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

    Sign Up