Popular Content

Showing content with the highest reputation since 11/15/2018 in all areas

  1. 7 points
    Hi, QuickTip of the day ... just do it ... Mikel
  2. 7 points
  3. 7 points
    To get each circle to move on its segment of the path is pretty advanced. You could create a custom svg path segment for each circle that controls how far it should move and hide it on top of the visible path. Another approach is that you can make each ball tween along the same full path and then tween the progress of each of those tweens. So 1 circle could animate on the first 50% of the path or another on the last 50% or another on the middle 50% of the path.. Keep in mind this is a very advanced concept and pretty much requires that you've experimented with the GSAP API for a few weeks. I really can't explain it all in proper detail but here is a demo: var tl = new TimelineMax({paused:true}); //create unique path data for each circle var bezierData1 = MorphSVGPlugin.pathDataToBezier("#motion-path", {align:"#circle1"}); var bezierData2 = MorphSVGPlugin.pathDataToBezier("#motion-path", {align:"#circle2"}); var bezierData3 = MorphSVGPlugin.pathDataToBezier("#motion-path", {align:"#circle3"}); //apply to all circles tl.set("circle", { xPercent:0, yPercent:0}); var circle1tween = TweenMax.to("#circle1", 1, {bezier: {values:bezierData1, type:"cubic", autoRotate:70}, ease:Linear.easeNone, paused:true}); var circle2tween = TweenMax.to("#circle2", 1, {bezier: {values:bezierData2, type:"cubic", autoRotate:70}, ease:Linear.easeNone, paused:true}); var circle3tween = TweenMax.to("#circle3", 1, {bezier: {values:bezierData3, type:"cubic", autoRotate:70}, ease:Linear.easeNone, paused:true}); //create a timeline that tweens each tween to and from unique progress values var tl = new TimelineMax(); //red tl.fromTo(circle1tween, 4, {progress:0}, {progress:1, repeat:-1, yoyo:true, ease:Power0.easeNone}) //green tl.fromTo(circle2tween, 2, {progress:0.25}, {progress:0.6, repeat:-1, yoyo:true, ease:Power0.easeNone}, 0) //blue tl.fromTo(circle3tween, 3, {progress:0.3}, {progress:0.8, repeat:-1, yoyo:true, ease:Power0.easeNone}, 0)
  4. 7 points
    Hey everyone We’re rolling up on Thanksgiving here in America, so I thought I’d say how thankful I am for this forum. You’re a terrific group of people and one AI. I’m so glad I started participating a few years ago. It’s truly been life changing. As a thank you, I’m gonna drop a couple sliders here for the community. I know there are umpteen ways to make a slider, but this is my take on it. I added multiple control types and linked the nav dots animation to the draggable element for a bit of fun. We often have questions about sliders so hopefully these will be a good jumping-off point for someone. Happy Tweensgiving
  5. 6 points
    Hi @teejay_hh, You can the .progress() method to make the timeline jump to any point in the timeline's progress (0 being the start, 1 being the end, .5 being the halfway point). Hope this helps!
  6. 6 points
    There's a bunch of different ways to pass stuff between siblings. I guess it matters what you mean by "stuff", as in is this stuff something that should be kept in sync with your app's state? Maybe @Rodrigo can chime in and offer some advice since he's the resident React expert around here. For something fast and simple, you can't go wrong with an event emitter. I added EventEmitter3 along with the ThrowPropsPlugin to your demo. When a throw ends, that component fires off an event along with its end y position. The other component will do a short animation, and log out the end y position. You could have your listeners setState if needed. https://codesandbox.io/s/x9y5m6qvyo
  7. 6 points
    Performance. Rendering textures is significantly faster than rendering vectors. Animating 1500 circles. Rendering the circles as vectors is giving me around ~15 fps in Chrome. When I switch to rendering the circles with a bitmap/texture, I get a solid 60 fps.
  8. 6 points
    You should not need over 1000 lines of code to accomplish this animation, which is relatively straightforward. I think the original developer of this banner ad was trying to make it responsive so that the assets resize and reflow according to the browser window, which makes the code more complex than it needs to be. I've done some experimenting with responsive ads and found it not worth the effort in getting it to work properly on different browsers. IMO, it's much more efficient to create individual sized banner ads since I don't have to go through such rigorous testing. Banners are not web-sites after all. It might be a lot simpler for you to redo this ad from scratch vs modifying someone else's code. You'll also get some valuable experience writing code on your own. You can write the HTML / CSS / JS from scratch or use a HTML boilerplate. In either case, you should only include what you need i.e. remove CSS, HTML or JS that you don't need thus making the code easier to read / maintain and for a smaller file size. Most banner ads like this should also not need jQuery, SASS, etc.
  9. 6 points
    Hi @redfawx! This effect looks like a pretty simple combination of (perhaps) varied tween durations, easing, and (perhaps) tween distances. I say perhaps because those would depend on the desired effect. Here is a simple CodePen to illustrate
  10. 6 points
    Clone snowflake. Append cloned snowflake. Animate cloned snowflake. Rinse and repeat. jQuery clone - https://api.jquery.com/clone/ vanilla clone - https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode Your code looks similar to this demo.
  11. 6 points
    Hi, Just for fun ... Happy pathDataToBezier ... or somethinmg else. Mikel
  12. 6 points
    I'd imagine there would be a number of ways to make it happen. Depending on the complexity you need, canvas would probably be a good solution. @Sahil has a neat canvas demo with some trails. @OSUblake has a cool one using SVG. Happy tweening.
  13. 6 points
    You just need to pause the timeline so it won't autoplay and get in the way. Does that help?
  14. 6 points
    Those values get passed as string. You need to create JSON string and parse it. <div data-from='{"yPercent": "0", "rotation": "0"}' data-to='{"yPercent": "-100", "rotation": "5", "ease": "Expo.easeOut"}'> const from = JSON.parse(el.dataset.from); const to = JSON.parse(el.dataset.to); Double quotes are important, if you don't want to use quotes, you will find some stack overflow threads with regex solutions. You can also encode JSON string from server in PHP, there will be equivalent solutions for other languages.
  15. 6 points
    The secret to great morphs (or any animation really) is to take the time to properly prepare your assets. Look at your demo without any morph running. Set the visibility of the #grey to visible and hide the #map. See how that doesn't look like a finished graphic? I think you're looking for a bit much from the morph plugin here. I saw your other question on the thread I mentioned and @GreenSock gave you some good advice there about path to path or concatenating the "d" values. You could also morph the map to the main part of the logo and then draw the outer ellipse separately. When you start morphing highly complex paths, you probably won't get the morph you're envisioning. You'll most likely want to break this into pieces to get the best result. You said you weren't experienced with AI so I'd recommend taking some time to get familiar with it. With proper preparation you can make it look like one piece morphs into multiple shapes. Here's an old demo from another thread, but it shows the basics of a square morphing to/from three circles. If you have a bunch of shapes, you can create a loop to go through them. Here's an examples of that. The bottom line here is the MorphSVG plugin is amazing, but you should always do your best to help it as much as possible. That all starts in your vector software. Happy tweening.
  16. 6 points
  17. 6 points
    Nice demo @Sahil. I can't believe you used the word canvas three times in your post and Blake didn't suddenly appear from a cloud of particles. 🤣
  18. 6 points
    It's telling you that tl is not defined because you have masterTl in your function. //switch this var masterTL = new TimelineMax(); tl.to(trail, 2, {alpha:1, rotation: 360}); return tl; //to this var tl = new TimelineMax(); tl.to(trail, 2, {alpha:1, rotation: 360, transformOrigin:"center center"}); return tl; Make that change and you'll be good to go. Happy tweening.
  19. 6 points
    Hello @Alan Kell and Welcome to the GreenSock Forum! Without a codepen we wont be able to see performance issues. First i would say that you should change the CSS property top in your tweens to use y (translateY). Since animating a position offset like top (as well as left, bottom, or right) will cause your element to trigger layout which is bad for performance. Using CSS transforms will allow your element to be animated without causing a layout calculation on every render tick (frame), which means silky smoothness. See CSS Triggers - top: https://csstriggers.com/top But as far as setting CSS properties with jQuery css() method. You should use the GSAP set() method instead of using the jQuery css() method. So this way you are setting CSS properties via GSAP so it can keep track and record what CSS properties you change. Otherwise you are changing css properties outside of GSAP. So you can change the jQuery css() method from this: // change jQuery css() method $("#modelSwipeLayer").css('display', 'none'); $("#ctlTopCurve").css('display', 'block'); $("#ctlTopCurve").css('z-index', '1'); $("#ctlHeader").css('height', '40%'); $("#imgHeader").css('marginLeft', $(window).width()); $("#imgHeader").attr("src", "/Content/Images/hero-image-3.jpg"); $("#imgHeader").css('z-index', 0); $("#IndividualDashCompareDescriptionContainer").css('display', 'block'); $("#IndividualDashMeasureDescriptionContainer").css('display', 'block'); $("#imgHeader").css("opacity", 0); $("#imgHeader").css("marginLeft", 0); To this using the GSAP set() method and using the GSAP AttrPlugin for setting your image src attribute: // to the GSAP set() method and AttrPlugin TweenLite.set('#modelSwipeLayer', {'display': 'none'}); TweenLite.set('#ctlTopCurve', {'display': 'block', 'z-index': '1'}); TweenLite.set('#ctlHeader', {'height': '40%'}); TweenLite.set('#imgHeader', { 'marginLeft': $(window).width(), 'z-index': 0, attr:{ "src": '/Content/Images/hero-image-3.jpg' } }); TweenLite.set('#IndividualDashCompareDescriptionContainer', {'display': 'block'}); TweenLite.set('#IndividualDashMeasureDescriptionContainer', {'display': 'block'}); TweenLite.set('#imgHeader', {"opacity": 0, "marginLeft": 0}); But its always better to create a reduced codepen example for use so we can test your code live: Resources: GSAP set() : https://greensock.com/docs/TweenLite/static.set() GSAP AttrPlugin: https://greensock.com/docs/Plugins/AttrPlugin Happy Tweening!
  20. 6 points
    Hi @bennyboy1978 Here's a demo I made for this thread. You may find it useful as it deals with blur events.
  21. 6 points
    Hi @Zaperela and welcome to the GreenSock Forum! Here are some helpful resources on CSS transform-origin: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin https://tympanus.net/codrops/css_reference/transform-origin/ https://teamtreehouse.com/library/changing-the-transform-position-with-transformorigin Even though SVG does not support 3D transforms at this time. That wont stop you like @PointC advised from separating your SVG into separate parts. Then you can wrap each SVG in a <div> tags and animate the <div> tags using 3D transforms. And here is just a simple example of swinging a door open and then closing it, so you can see the structure and use of transform-origin. But there are many ways to achieve what you want. Best of luck to you! Happy Tweening
  22. 5 points
    You can probably use sticky positioning. https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning
  23. 5 points
    When you define a from tween, GSAP will set your element to that position and animate back to original position. So for example if your element is at 0 and you create a from tween with value of 100, GSAP will set your element to 100 and animate back to 0. If while creating the tween if element was at 50, then GSAP will animate from 100 to 50. If it was already at 100, then nothing will happen because start and end positions are same. I removed each because it was unnecessary. You can still use each and it will work. Also, with GSAP you don't need anything like jQuery's stop. GSAP overwrites any tweens for same property of the element by default. You can change the overwrite behavior if you ever need, check the docs. https://greensock.com/docs/TweenLite You can visit the learning page and youtube channel to get familiar with GSAP API, https://greensock.com/learning https://www.youtube.com/user/GreenSockLearning
  24. 5 points
    Hi, Like this one? Happy shadowing ... Mikel
  25. 5 points
    There would be several ways to make that happen. If you perform a search of the forum for 'infinite carousel', you'll find plenty of threads and demos to get you started. Here's a good example. PS We're always happy to help with your GSAP related questions, but please don't re-post your question again on an unrelated thread after waiting only an hour for a response. The forum is fairly quiet on the weekends so you may not always receive an answer as quickly as you'd like.
  • Newsletter

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

    Sign Up