Jump to content
Search Community

Leaderboard

Popular Content

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

  1. If you just want the reverse to go faster, you can adjust the timeScale. tlMenu.reverse().timeScale(3); More info: https://greensock.com/docs/TimelineMax/timeScale() If you want a different ease for reverse(), we've had a few discussions about how to do it: https://greensock.com/forums/topic/9229-how-to-apply-different-easing-of-animation-normal-and-reverse/ https://greensock.com/forums/topic/8040-change-easing-for-timeline-reverse/ https://greensock.com/forums/topic/11702-reverse-elastic-ease-in-no-ease-reverse/ If you have other questions, it's usually best to provide a demo. More info: Hopefully that helps. Happy tweening.
    4 points
  2. Just for comparison, here's the logo using a displacement map in Pixi.
    4 points
  3. Holy sh*t, that did it. My man! I'll do a CodePen next time. Thanks!
    3 points
  4. Hey Frunky! Allow me to butt in here. Animated displacement effect with SVG is not hardware accelerated and not performant at all. If that's the effect you are after, you will want to use Canvas (or a library that uses WebGL).
    3 points
  5. Hi @swpowe Welcome to the forum. Sounds like a good job for a clip-path. (or mask) Hopefully that helps. Happy tweening.
    1 point
  6. Hi all, I thought I'd post this recent find in here, as it might be relevant https://github.com/orling/grapheme-splitter
    1 point
  7. Back in the day, I would do the whole 9 yards... Minify HTML, CSS, JS, SVG, compress the images, inline some of the assets. If you have a limited amount of KB, you have to squeeze the orange all the way, man.
    1 point
  8. Hi and welcome to the GreenSock forums and Club GreenSock! Sorry to hear you are having troubles. To load GSDevTools there are 2 steps. 1: Make sure you are loading GSDevTools into your page, most commonly via a script tag. In your example it would be like <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js'></script> <script src="js/GSDevTools.js"></script> <script src="js/index.js"></script> It doesn't matter if you load TweenMax from the CDN or locally 2: Activate GSDevTools using GSDevTools.create(); I've updated the demo you created to load and activate GSDevTools CodePen has a feature that lets you export Pens as zips so you can download and run them locally. I will PM you a version that works locally in just a minute.
    1 point
  9. Hi @PaoloDoma Are you looking for such an effect? And just for fun: Happy tweening ... Mikel
    1 point
  10. 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
  11. 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.
    1 point
  12. 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.
    1 point
  13. 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
    1 point
  14. 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.
    1 point
  15. 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.
    1 point
  16. 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); }
    1 point
  17. 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 }); }
    1 point
  18. Is this the effect you're after?:
    1 point
  19. 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
  20. I guess it depends on what your drawing, but most people animate the stroke-dashoffset and stroke-dasharray, like the DrawSVGPlugin does. https://greensock.com/docs/Plugins/DrawSVGPlugin Not saying that is the best technique, but it's certainly easy. For lines/polygons, I like animating SVGPoints directly. That can be used to create some pretty interesting stuff, like waves.
    1 point
  21. 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
  22. Hi @elegantseagulls You can add the duration like this: jetTL.tweenTo('turn0').duration(1); Happy tweening.
    1 point
  23. Sounds like you're looking for the ScrollTo plugin: https://greensock.com/docs/Plugins/ScrollToPlugin That will allow you to scroll directly to an element like this: TweenMax.to(window, 1, {scrollTo:"#yourElement"}); Hopefully that helps. Happy tweening.
    1 point
  24. You can use the intersection observer for scrolling, and there are polyfills for IE and Safari. It's asynchronous, so some of your code might be deferred under heavy load, but performance should generally be better. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API Yes, check out the docs for the CSSPlugin. That's where most of the magic happens if you're animating the DOM. https://greensock.com/docs/Plugins/CSSPlugin Also, using CSS Containment can help with reflows/repaints, but browser support isn't that good at the moment. https://developer.mozilla.org/en-US/docs/Web/CSS/contain
    1 point
  25. I hope you realize that getting the scroll position causes a reflow, so using ScrollMagic can negate some of those benfits. ? https://gist.github.com/paulirish/5d52fb081b3570c81e3a And scaling isn't as optimized as most people like to think. The browser can rasterize the content, limiting the amount of scaling you can do before it starts looking like crap, or it can repaint the content on every animation frame. Using will-change will cause rasterization. https://greensock.com/will-change https://dassur.ma/things/forcing-layers/ To scale x, simply scaleX. .to( animate.down, 1, { x: animate.neg, y: animate.pos, scaleX: 0, repeat: 1.25, ease: Sine.easeOut, yoyoEase: true }, "together" ) To prevent squashing/stretching of children during a scale animation, you can apply a counter scale.
    1 point
  26. Another approach that requires a little more work, but is more flexible. It finds the closest point on a path, and does not require a proxy element. A couple threads on the technique.
    1 point
  27. Hi, I had to deal with something like this about a month ago. First you forgot to include jQuery in the pen's resources. Then in order to enforce the right bounds, you need to find the dimensions of the path you want to use as track using getBBox() and use those in the Draggable instance, but for that you have to line up the patch and the track correctly, otherwise it looks a bit funny: var bounds = document.getElementById("line2").getBBox(); var R = Draggable.create( "#patch_218_454", { type: "x,y", bounds:{ minX: 0, maxX:bounds.width, minY:-5, maxY:bounds.height - 5 }, onDrag: function (e) { console.log(e.offsetX); console.log(R); } }); Then in order to limit the patch movement to the path you want to use, don't use the Draggable instance on the patch but in a dummy object, then simply trigger the instance using the patch and update an independent GSAP instance using the onDrag callback. This sample from one of our heroes @Diaco shows how to do that: Here in the docs, more specifically in the config object properties you'll find the trigger property. https://greensock.com/docs/Utilities/Draggable Hope this helps. Happy Tweening!!!
    1 point
  28. Welcome! This forum is being provided as a free service to connect talented GSAP animators with those looking to hire them. Please read this entire post before participating. When Posting a Job: Describe the project's technical requirements and provide links to similar examples and/or storyboards (if available). List the start and end dates of the project (or at least a rough timeline). Provide an estimated compensation range. The more detailed you are in describing your needs, the better your odds of success. If you omit the budget, there's a high risk that qualified candidates will assume it isn’t worth their time. Remember that talented GSAP experts are typically in high demand. We encourage candidates to post public replies to show they're interested, but further coordination should be handled privately either through the forum’s private message system or email. It's probably best not to post your email address in a public forum. Once a candidate is found, please update the post to let others know that the job is no longer available. Freelancers Feel free to post your availability in this forum proactively. Include links to your own website, portfolio, CodePen profile, etc. so that people can get a feel for your style and skill level. It’s a great idea (though not necessary) to post a price range for each example as well. Please represent your skills accurately and include proper attribution for work that’s not yours. One of the keys to a successful working relationship is managing expectations (both sides)! Always under-promise and over-deliver. Pricing a project We generally recommend agreeing to an overall project price and timeline ahead of time rather than billing a flat hourly rate. Some developers work twice as fast as others, so an hourly rate isn’t an accurate gauge of overall cost. But for open-ended projects, we understand that hourly rates might be the best fit. Additional notes We are starting this service on a trial basis. Freelancers are NOT employees of GreenSock. Anyone on the Internet can post here. GreenSock is not liable for anything that happens before, after, or during the life of your project. Please don’t contact us for arbitration help. It’s fine if you want to simply report abuse. If we receive complaints about your conduct (employers or developers), you may be banned from posting here. Again, we make no promises to investigate each and every claim or get into "he said, she said" back-and-forth, so it's in your best interest to keep things positive and exceed expectations. Make us proud. GreenSock does not research or endorse any of the parties posting here. Please let us know if you have any suggestions for making this service even better. Happy tweening!
    1 point
  29. Those circles are like placeholders to all the consonants and rest is vowel. Devanagari works by combining consonant with vowels and creating unique character, if anybody hates spelling in English then you will love it. Looks like perfect idea by @Acccent, you will need to add too many conditions otherwise. This implementation will take care of almost all languages. As for arabic or similar languages (don't have first hand experience with them), they work a lot different at least while typing. Take a look at following video, So with current implementation whatever language it is, if user can split the characters and it makes sense to them then they can use it.
    1 point
  30. Oh, I definitely don't think it would be wise to add this sort of behavior where an ease totally changes its behavior based on playhead direction. It could lead to a lot of confusion and conflicts. Keep in mind that timelines can be nested, so what you mean by "forward" and "backward" can get pretty fuzzy. For example, what if you reverse() a tween that's inside a reversed timeline? It technically looks like it's playing forward. So what would the "correct" behavior be in your example? Would the ease change its behavior to the "backwards" way (after all, it is technically in a reversed tween)? Or does it need to walk up the entire chain to figure out its global direction? If so, that could have a pretty uncomfortable performance implication (walking up the chain on every single render of every tween). And then what happens if you change direction part-way through a tween? Like what if it's 50% finished and then you reverse()? The object would suddenly jump to a new position (because the ease would plot differently in that direction). Most people would see that as highly unintuitive and undesirable. Not that it's a terrible idea or anything - I've just been doing this long enough to spot changes that could become nightmarish down the road with a bunch of unintended (or unforeseen) implications.
    1 point
  31. Hi Richard, here is the promised video: Let me know if you have any other questions, hope it helps. Cheers Petr
    1 point
  32. Hello pauljohnknight, and Welcome to the GreenSock Forum! Ihatetomatoes has some tutorials using GSAP with ScrollMagic. ScrollMagic is made with GSAP, but is not made by GreenSock, and uses it for it's scroll tweening. But here are some tut links: https://ihatetomatoes.net/simple-scrollmagic-tutorial/ https://ihatetomatoes.net/how-to-animate-svg-with-greensock/ https://ihatetomatoes.net/svg-scrolling-animation-triggered-scrollmagic/ http://scrollmagic.io/examples/basic/simple_tweening.html Happy Tweening!
    1 point
  33. Yeah its possible. The best thing is if the children div's will have a unique class name. In your case each div has a diffrent class name (message1,message2..), best thing is to give them a common class name, and then staggering them. But if you know that all of the child elements are messages you can easily do something like this: TweenMax.staggerFromTo($('#message-container').children(),0.4,{alpha:0},{alpha:1},0.2) here's a codepen: http://codepen.io/bazooki/pen/avits Hope this helps =)
    1 point
×
×
  • Create New...