Popular Content

Showing most liked content since 10/17/2017 in all areas

  1. 7 points
    Hi all, one mask - two rects - one timeline - the help of use that simple it can be
  2. 7 points
    Hi @menschies ! Welcome to the forums! Always remember: With Great Powers, Comes Great Responsibilities. Use them wisely, use them to make things a little bit nicer. A few comments: You can use images instead of inlining the whole SVG if you are not changing the inside of it. The solution to your question is about nesting the separating the elements and nesting them based on your needs. I'm super busy these days but I wouldn't mind lending a hand whenever possible for your landing page - within limits. I can't take any responsibility at the moment.
  3. 7 points
    Believe it or not, the trick here is the easing! I did something similar to kind of give a "slot machine" rolling aesthetic to the end of a sentence here What you'd want to focus on is the ease: Elastic.easeInOut.config(8, 0) For your case, "8" might be too much ... so modify that to get the right feel for your project.
  4. 7 points
    Hi @Nineve Use scale instead of zoom. Problem solved. Serializing and deserializing the position and rotation of draggables should be real easy. In that demo, you can loop through the array of draggables like this. draggables.forEach(function(draggable, index) { var target = draggable.target; var transform = target._gsTransform; console.log("Rotation", transform.rotation); console.log("X", transform.x); console.log("Y", transform.y); });
  5. 7 points
    A couple quick things ... you have a lot of variable names/selectors going on ... learnmore $learnMore '#learnMore' First and foremost, your first line needs to be capital `M` in the id `learnMore` because that is how the ID is assigned in the html, and you don't use the # when get an element by id. var learnmore = document.getElementById("learnMore") Then ... use your variable 'learnmore' ... not other misspellings; e.g. $learnMore. Technically you can use the '#learnMore' selector as GSAP has a built selector engine. But, for consistency, I would use the variable that is already created. Lastly, use event listeners to call the functions wrapping each Tween
  6. 7 points
    Hello @timdtand welcome to the GreenSock forum! This is happening due to not returning your timeline in your timelineone function. GSAP add() method expects a timeline being returned when you have a function. So your missing this inside timelineone() fucntion return tl; And all together function timelineone(){ var tl = new TimelineMax(); tl.from(".tekst1",1,{x:250}) .to(".tekst1",1,{scale:0.1,autoAlpha:0}); return tl; // your missing this line } And now you can see your animation run Checkout this CSS Tricks Article by the Mighty @Carl on how to write smarter animation code: https://css-tricks.com/writing-smarter-animation-code/ And this: Happy Tweening!
  7. 6 points
    I've made a few games using GSAP: Nevergrind - Single-Player RPG Firmament Wars - Realtime Multiplayer Strategy Game I have no regrets using GSAP. It's my favorite tool and as far as I'm concerned it hasn't limited me in any way and I feel very productive with it. I plan to make a 3rd game, a multiplayer co-operative rogue-like follow-up to Nevergrind. Developing games with GSAP is a pure joy. If needed you can even pause the game, as long as you don't use setTimeout or setInterval. As long as every timer and animation is created using GSAP (TweenMax, TimelineMax, TweenMax.delayedCall), you can just do TweenMax.pauseAll() to pause the game (this can be done in Nevergrind by hitting ESC). Since GSAP can tween any object value using any ease, it's simple to Tween using the set method, onUpdate, over time, or whatever kind of animating you need to do. Hope that helps. Discovering GSAP was like finding the holy grail for me because I was seriously using JQuery's .animate before that.
  8. 6 points
    Trick is to set maxX to 0 and minX to viewport width minus container width. You can apply bounds on resize using applyBounds method on resize so your content can be responsive.
  9. 6 points
    Results may vary, but <use> elements are not static, so the browser has to track changes across every instance. https://stackoverflow.com/questions/8604999/does-reusing-symbols-improve-svg-performance This slide show reveals really poor performance. http://slides.com/rovolutionary/tuning-svg-performance-in-a-production-app#/ Performance issues aside, the real issue when working with the <use> tag is that everything is hidden inside a shadow-root, which you can't access. That might be ok for static icons, but not for animations.
  10. 6 points
    Hi @lichunbin814, Welcome to GreenSock Forums. Please look at these tips: https://greensock.com/svg-tips Special: transformOrigin. Here is only an approximate direction: Happy tweening ... Best regards Mikel
  11. 6 points
    I could see some importance to let the first timer's know about the prerequisites to learn GSAP, for example minimum knowledge on javascript helps us to understand and learn GSAP easier, a person who has no idea on javascript might feel difficult to understand/retain the syntax/concepts of GSAP. not sure if this is important, just putting out my initial thoughts when I first visited getting started page.
  12. 6 points
    Hello @mi_cky and Welcome to the GreenSock forum! Thank you for creating a codepen example. I tested this in latest Chrome on Windows 10 and could only see this happening sometimes like in your screenshots. This might be happening more in Chrome when on Apple devices with Apple OS. Can you please be more specific in exactly what your doing so we can try and replicate exactly what you are seeing. I see the root of your problem being that your trying to access elements that are within a SVG <defs> element. Keep in mind that you shouldn't be targeting elements within an SVG <defs> element. They should only be accessed via the SVG <use> element. Since the SVG 1.1 spec dictates that elements within a <defs> element are not directly rendered. So you shouldn't be targeting those elements. Chrome might allow you to since Chrome does not follow the SVG spec at first, but later will honor the SVG spec regarding the <defs> element. So by doing this your just asking for issues like your seeing in those screenshots. SVG <defs> element: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs Graphical elements defined in a <defs> element will not be directly rendered. I know you said "not crossbrowser", but that is the key in why you are having this buggy behavior in Chrome. When i view your code example in Firefox i see a NS_FAILURE_ERROR thrown error in the browser console. That is a namespace error when trying to access an element inside the <defs> element that doesn't exist in the render tree (DOM). The SVG <defs> element is not directly rendered along with SVG graphical elements, meaning it is not part of the render tree. So if you try to access an element that is a child of the <defs> element, the browser will return an error in the console of NS_FAILURE_ERROR, since the element is not in the render tree. That is because Firefox follows the SVG spec, but Chrome is the wild west and allows you to do stuff that is non standard to the spec, but will render all buggy. So you should try to do the same but don't target elements within the SVG <defs> element.
  13. 6 points
    Here is very basic demo. You can change movement based on element you are animating. You can also use parallax.js which responds to gyroscope on mobile devices.
  14. 6 points
    That's really not valid JavaScript using the same property name like that. I think the best way to animate filters at the moment is to not do it directly. Lots of weird things can happen, particularly with drop shadows. So I would create a filters object, and then tween that. This will also allow you to tween the filters independently.
  15. 6 points
    You can set the scale from CSS using transform property. img { transform: scale(0.5, 0.5); } Or you can define a fromTo tween and pass it to 'setTween()'.
  16. 6 points
    Expanding on what @Sahil said, something like this.
  17. 6 points
    You had missing parentheses on line 35. hoverTwoTL.reversed() ? hoverTwoTL.play() : hoverTwoTL.reverse();
  18. 5 points
    There are several different ways to workaround animating properties like top, left, bottom, and right. The easiest is probably to just position your element in its end state, and then animate to it using transforms like x and y. That will allow you to use responsive units, like left: 50%, but without any performance penalties.
  19. 5 points
    To animate element's top or left properties you need to set it's position. Animating left, top can give you poor performance because it causes browser repaint every time you animate top, left. Instead you can x, y for transformation.
  20. 5 points
    There is currently no logic in place to check for individual class names so it must follow the order found by doing this. var className = myElement.getAttribute("class"); Just an FYI, changing class names without jQuery is now pretty easy. Won't work on SVG in IE though. myElement.classList.add("foo", "bar"); myElement.classList.remove("foo", "bar");
  21. 5 points
    No you will have to use two separate timelines for reverse and play. If your animation is too complex, you can create master timelines and add timelines to it using functions. Following are tutorials for complex timelines
  22. 5 points
    In general, I find absolutely positioning everything at some common origin, like 0,0, and using gsTransform to navigate and move stuff around to be the best approach. That works really well when using multiple draggables instances, like in a grid. However, that's not always possible, so you will need to use other approaches. I already mentioned how getBoundingClientRect is really reliable, but so are element properties like clientLeft, clientTop, clientWidth, clientHeight, offsetLeft, offsetTop, offsetWidth, offsetHeight. The difference between the client and offset properties aren't that great, so I'll skip that comparison. I made a demo that does some really basic animations, and displays how gsTransform, getBoundingClientRect, and the offset properties are interpreting those changes. Check out how the properties for getBoundingClientRect start to differ from gsTransform when its rotating. That's why I said rotation was a huge gotcha in another post. I would say that everything being displayed there is technically correct, even though their values don't match up. If you're wondering what's up with the offset properties, it's because they don't take into account any transforms. That doesn't make them any less important or inaccurate. In fact, sometimes that's exactly what you want. In that grid demo above, I use offsetLeft and offsetTop for positioning because I know the coordinates won't be affected by any transforms, making it much easier to calculate stuff. And if you like that grid demo, here's another version using SplitText!
  23. 5 points
    Exactly. Here's a safe way to initialize a transform. console.log(myElement._gsTransform); // => undefined TweenLite.set(myElement, { x: "+=0", overwrite: false }); console.log(myElement._gsTransform); // => x, y, scaleX, scaleY, rotation, etc... But that's only for transforms. If you're not translating your element with CSS or with GSAP, it doesn't matter where it's positioned, its x and y will always be 0,0. To get screen coordinates for an element, use getBoundingClientRect.
  24. 5 points
    Can you put that in demo? It's hard to advice without seeing what you're doing. Sometimes animating font size may not be the best approach. Scaling might look better in some situations.
  25. 5 points
    You can also chain multiple timelines by adding them into parent timeline, it will help you a lot as you are doing something complex. https://www.youtube.com/watch?v=ZbTI85lmu9Q https://www.youtube.com/watch?v=8ETMjqhQRCs
  26. 5 points
    Hello The first issue i see is that your adding an onComplete callback to the play() method. But the play() method does not accept a callback, see the play() docs: https://greensock.com/docs/TimelineMax/play() You can see play() only accepts 2 parameters but no callback. from: * (default = null) — The time (or label for TimelineLite/TimelineMax instances) from which the animation should begin playing (if none is defined, it will begin playing from wherever the playhead currently is). suppressEvents: Boolean (default = true) — If true (the default), no events or callbacks will be triggered when the playhead moves to the new position defined in the from parameter. So you would need to place that onComplete callback inside the tl1 timeline constructor, like this: var tl1 = new TimelineMax({ paused: true, onComplete: function(){ tl2.play(); } }), tl2 = new TimelineMax({paused: true}); tl1.from(".foo", 2, {x:"400", autoAlpha: 0}) .from(".goo", 1, {y:"400", autoAlpha: 20}); tl2.to(".foo", 1, {scale: "2"}) .to("goo", 2, {scale: "4"}); tl1.play(); Here is a link to the TimelineMax Constructor docs: https://greensock.com/docs/TimelineMax/TimelineMax() And here your forked pen with the onComplete firing with your call to tl2.play() Does that help? Happy Tweening!
  27. 5 points
    Hello @hh23 and Welcome to the GreenSock Forum! The reason autoAlpha: 0.99 works is due to how the stacking context works in the browser. That puts the element onto a new stacking layer Please see stacking_context spec One of the ways an element will get a new stacking context is when an: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context In IE you can just set transform-style to flat ( transform-style: flat ) Happy Tweening!
  28. 5 points
    Very interesting - it looks like this has nothing to do with GSAP but is related to how some browsers "optimize" SVG rendering in certain situations. If you remove the "perspective" that you set on the SVGs, and make autoAlpha go to 0.99 instead of 1 on those same elements, it resolves things (at least in Firefox that I tested it in). So just 2 changes to your code. Most browsers force anything that's got a 3D-related property set (like perspective, rotationX, rotationY, or z) to get rendered on the GPU, thus it creates a texture for it, often at the original raster size and since you're scaling this up to 20x its normal size, things are getting pixelated when that texture is stretched up. The other odd thing was how the browser decided to totally shift the rendering as soon as its opacity was 1 (but 0.99 was fine). Does that help?
  29. 5 points
    Hi and welcome to the GreenSock forums, I dug around and think I found the effect you were mentioning https://ueno.co/about I think what you are referring to is edgeResistance like how the pictures bounce back when you drag too far. By setting the minX and maxX bounds on the Draggable we can tell it how far it can be dragged. Here is a small demo I whipped together which should help Check out Draggable and Draggable Docs If you are trying to do something else, please clarify and we will do our best to help.
  30. 5 points
    Yeah, like Sahil mentioned, the demos and video show the slider so I'm not sure what part you are missing. Here is another demo that uses a basic HTML5 input slider (no jQuery or jQuery UI) The easiest way to control a timeline without any coding is GSDevTools https://greensock.com/gsdevtools
  31. 5 points
    The reason that doesn't work is because original demo contains jQuery UI element with id '#slider'. Again I will repeat my previous advice, follow those two new tutorials carefully. After that you should be able to do pretty amazing sequences.
  32. 5 points
    Here is the video where Carl walks you through that exact demo. If you follow that step by step and follow these two part tutorial, you should be able to combine them. https://www.youtube.com/watch?v=ZbTI85lmu9Q&t https://www.youtube.com/watch?v=8ETMjqhQRCs
  33. 5 points
    Hello @menschies and Welcome to the GreenSock forum! Yes i agree with @Dipscom, regarding using images instead. You can use SVG, the only thing is you would have to spend more time with the initial setup. Making your SVG dimensions just fit the elements, like in your case the moon and rocket ship. Also keep in mind since your using CSS position fixed, that you will have cross browser issues and a performance hit when having your elements always in a state of position fixed. If you optimize your SVG so they just have your elements fitting in the whole SVG, you will have more control of positioning cross browser. There are known bugs especially with webkit Chrome and many more position fixed bugs with webkit Apple Safari. You should use position absolute instead so you dont have to deal with position fixed issues. The way it is setup now your SVG's take a whole lot of space, and to get them to line up when in desktop or mobile would require some tinkering with the viewport attribute of each SVG and on resize so it changes automatically to fit your elements based on the browser viewport. With SVG you can only animate using 2D transforms which can not be animated using hardware acceleration for better performance. But if you wrap your SVG with a <div> element than you can animate with 3D transforms. So i believe once you get your SVG child elements compacted to fit within your parent SVG for the moon and your rocket ship it will make animating your moon liftoff more fun and easier to animate. Then you won't have to worry about adjusting the SVG viewport attribute values, or forcing the position of your two SVG's when in a mobile or desktop browser viewport.
  34. 5 points
    Hi @rickhurk, Welcome to GreenSock Forum. It would be great to animate such an icon as SVG. You can then fade in/out or morph parts. Please look at these tips: https://greensock.com/svg-tips If you have a question, it would be great if you can make a demo. Kind regards Mikel
  35. 5 points
    Are you talking about this line of code? tl.to('.header', 3, { opacity: 0, onUpdate: moveDown() }) When referencing a function, don't put the parentheses at the end. That will immediately call the function. So try this. tl.to('.header', 3, { opacity: 0, onComplete: moveDown })
  36. 5 points
    The easiest is to use the DrawSVGPlugin. Check out these posts by @PointC https://codepen.io/PointC/post/animated-handwriting-effect-part-1 https://codepen.io/PointC/post/animated-handwriting-effect-part-2
  37. 5 points
    Hello @brightpixels and Welcome to the GreenSock Forum! When dealing with the SVG <use>, there is cross domain security, due to same-origin policy. You would need to have the SVG located on the same domain. So, Yes i would echo @OSUblake advice. It is better to just use the SVG embedded in your page so you dont have to deal with generated content or elements that are hidden, external, and not directly rendered in the DOM. Also there are still various browser bugs when using the SVG <use> element when defined in your CSS which can be blocked by the browser. So your better off to just including your SVG inside the same document. Happy Tweening
  38. 5 points
    Great Topic and question @Carl Top 5 features or concepts would be: how to use the position parameter (like when to use position parameter versus delay, relative values verse absolute values, and labels) gotchas when using all from() tweens (like immediateRender, etc) when to use the add() method when to use TweenMax (TimelineMax) versus TweenLite (TimelineLIte) organizing child timeline functions for use in a master timeline Just my two cents on this
  39. 5 points
    For me, the things that stood out to me in the first few weeks were ... Chaining and offsets to create perfectly timed sequences of animations Labels! That I could rely on eases to make visually complex animations very simply Don't underestimate FromTo and Stagger! That you can animate any property of any object ... huge! The biggest feature of the platform ... the community! This forum is second to none.
  40. 5 points
    Hello @clung227 and Welcome to the GreenSock Forum! Sorry your having an issue! This sort of thing will be really impossible to debug just by looking at a partial code snippet and not see how your code interacts in a live editable environment. Please create a limited codepen demo example so we can test your code live to better help you in context. Thanks
  41. 5 points
    Not that I've noticed. But keep in mind that filters includes SVG filters, so there's an infinite number of combinations. Just for fun, here's a simple SVG motion blur filter.
  42. 5 points
    Hi @barrowman Just to add my 2 cents worth to Super @Carl's answer, you can also put a counter in your onComplete function. Maybe you want to do a complete play a few times and then a partial play and then end. You can increment a count variable and play accordingly. Happy tweening.
  43. 5 points
    Instead of telling the timeline to repeat (which will make it go back to the beginning) you can use an onComplete callback that plays from wherever you want var tl = new TimelineLite({onComplete:playFromCustomSpot}); tl... function playFromCustomSpot() { tl.play(5)// play at 5 seconds or a label }
  44. 5 points
    Hi @timdt Read up on the various parameters for a timeline. https://greensock.com/docs/TimelineMax/TimelineMax() var master = new TimelineMax({ repeat: -1, // infinite repeat repeatDelay: 1 // you can set a delay if you want });
  45. 5 points
    Playing around with some pseudo 3d boxes.
  46. 5 points
    You can use modulus on current rotation by 360 and get absolute value. Based on that you can determine where arrow is pointing. You can play with snap a bit so arrow won't stay on edge.
  47. 5 points
    This is actually a great question and I'm grateful for all the responses thus far. I'll try to be as unfiltered as possible, taking off my green sock for a moment File size - GSAP does a LOT for you, solving browser inconsistencies, delivering a ton of features, blah, blah - that takes some kb. Sure, there's a CDN and GSAP's ubiquity makes the file size a non-issue in many cases, but the reality is that TweenMax is larger than most other animation libraries and if you're bundling it in your own JS file (like a Webpack bundle), it can be a tad heavy if you're only using it for a few little things. License/cost - even though the vast majority of use cases qualify under the standard "no charge" license, some might require the special commercial license that comes with "Business Green" Club GreenSock memberships. It's not "open source" in every sense (yes, you can view the source on Github but that's not the same thing). And some of the plugins are only available to club members. I argue that the license is actually a BENEFIT, not a drawback, but some people may feel differently and that's okay. Main thread - this isn't specific to GSAP, of course, but some would argue that CSS animations and WAAPI can get better performance than any JS library when it comes to animating transforms (scale, rotation, translateX/Y) because in some cases (when NOTHING else is animating except transforms or opacity, and the main thread is super busy, and there aren't too many transform tasks), transforms can be spun off to a different CPU thread. Sometimes that's indeed useful and can result in less jank. That being said, I've seen several cases when GSAP is actually faster than WAAPI and CSS, so it's not fair to make a blanket statement that JS libraries are always slower. https://greensock.com/js/speed.html I think that about sums up the "negatives" that I've heard in the past. Of course I want to chime in with a ton of counter-arguments that dwarf the negatives, but that's not what you asked for As for Snap.svg, that's more of a library for creating and interacting with SVG elements, not so much animating them. Even the author of Snap.svg said that GSAP is probably the best thing for animating Snap.svg objects. So I wouldn't say that Snap.svg and GSAP are competitors at all - they're complimentary. GSAP is focused on animation - you can't create SVGs with it. Likewise, the author of Snap.svg said it wasn't designed to do complex animations. Does that help?
  48. 5 points
    Hello @fredcorr and welcome to the GreenSock forum! Sorry your having an issue! When i look at the code being outputted i see SplitText applying the custom class you have on each line: Frame1lines1 Frame1lines2 So there is a way for you to target those lines for applying position to each line. I also see SplitText adding a separate <div> for each word within each of the <div> lines: Frame1lines1 and Frame1lines2. Try opening your browser inspector and you will see the <div>'s SplitText creates for lines and words. I looked at IE11 and did not see this issue. I presume you are on Windows 7? If you are viewing in IE10 i strongly recommend you update to IE11. Microsoft doesn't even support IE10 anymore. Last security update for IE10 was in January 2016. Unless I'm missing something here? Let's see if others are seeing what I'm seeing after SplitText splits your lines and words into usable markup?
  49. 5 points
  50. 5 points
    Right. The gif you uploaded made a world of difference. I have my CodePen in a different layout than yours (with the code on the left, rather than on top) and copying your layout enabled me to replicate the error you are reporting. I have never used SVG.js (although I do a fair bit of SVG myself) so, I haven't got much insight, you will have to help me to help you. The issue stems from the fact that you are modifying the width of the 'line' based on the 'x' of your 'point_dr'. At some point, for some reason, one manages to drive that number into the negative, which causes SVG.js to throw an error. I don't feel you have the best setup by changing the width but it appears to me that you can stop the SVG.js error by simply doing a Math.abs() before you assign it to the 'x'. var x = Math.abs(point_dr.x); Since you're using draggable, you will have access to a lot of information if you look into the 'this' object inside your mySlider() - In your case 'this' will be the actual Draggable object, it probably will be safer to track how much the mouse has moved (deltaX), subtract that from the width of your line making sure that if you get a number that's less than zero to make the end value equals to zero. Something along the lines of: var x = line.width() - this.deltaX; if(x <= 0) { x = 0 } Hope that helps! ps: Shooooo @Carl! I'm trying to earn some brownie points here! Don't steal my thunder...