Leaderboard


Popular Content

Showing content with the highest reputation since 04/20/2018 in all areas

  1. 10 points
    Hey GreenSockers, This is my 2,000th post so I wanted to take a minute to commemorate the occasion. It’s so much fun to hang out with all of you. As I’ve said before, this is truly a unique place on the web. The community is so friendly and smart and I learn a ton by reading through different approaches to problems and reverse engineering all the clever answers and demos. Thank you all for sharing your knowledge. A special thanks to @GreenSock and @Carl for putting up with me for 2,000 posts. Shout-out to all the other mods @Jonathan, @OSUblake, @Dipscom, @Sahil, @Rodrigo, @Shaun Gorneau, @Acccent, @Visual-Q, @mikel. You are a terrific group of people (and one A.I.) and I’m inspired by all of you. I hope my little SVG tips & tricks have helped some community members save some time and prevent a few headaches. I’m looking forward to continuing this never-ending journey of learning with the entire GreenSock community. Happy tweening. - Craig
  2. 9 points
    Oh my turn! my turn!! PS: Sorry couldn't resist
  3. 9 points
    Hi there! My name is Sarah, I'm on the Vue core team and do a lot of work with Vue and SVG animation using GSAP. Yep, you're on the right track, refs are the way to target these elements though technically it still works to target an id or class as usual. However, there are some key pieces in here that I want to separate out in case it's helpful to you, because really the sky's the limit! And they play so well together: 1) The way that animation and rendering work, you are *always* going to be touching the DOM in the case of animation, this can't only happen in the virtual DOM (something that people miss about React, too, even when looking at libraries like React-Motion) 2) There's a way to interpolate numbers that then update the DOM by transitioning state, and then there is accessing the DOM directly. You can use Vue and GSAP for both. I rewrote the docs example to use GSAP for our transitioning state example here: https://vuejs.org/v2/guide/transitioning-state.html#Animating-State-with-Watchers, but the way you're working with the DOM nodes and watchers, you may be more interested in this chart I wrote with where I'm spinning up SVG DOM nodes with directives, which is similar to what you're doing. In other words, you can use Vue and GSAP to interpolate number or values, and then apply that to a style binding, OR you can just update the fill in GSAP by targeting the element directly, that will still work. There is even a relative HSL tween that gsap offers if that's your jam 3) You might also want to set things up with a transition component, which offer some javascript hooks for beforeEnter, enter, and leaving states: (I have a bunch of pens that do this but this is probably the simplest Vue Book Content Typer) The nice thing that the transition component offers you is an ability to coordinate one thing entering and another leaving, with transition modes. They're pretty spectacular. You will also be given FLIP under the hood with the transition-group component. 4) You can also plug directly into the mounted lifecycle hook, as you can see here: Vue Weather Notifier Pen. This way you can activate an SVG animation on the component as soon as it's in the DOM. You can also see in this pen I'm changing opacity, using drawSVG, changing color, rotating, you name it- it's all possible on SVG elements and you don't *have* to put them in data. Though there's nothing wrong with transitioning state that way either. I also wrote this article that should help you: https://css-tricks.com/intro-to-vue-5-animations/ And have this open source repo which is a whole workshop just about vue and svg animations: https://github.com/sdras/animating-vue-workshop Please feel free to ask any questions as well. Thanks!
  4. 8 points
    A GSAP tale: One goofy guy’s odyssey from knowing nothing to knowing just enough to confuse himself. (This is crazy long so feel free to jump to the epic conclusion). Greetings fellow GreenSockers. The end of this week marks the one-year anniversary of my first post on the forum so I thought I’d take the opportunity to share my 12-month story and hopefully encourage others to jump into the conversations around here. Maybe you’ll recognize yourself in some of the things I’ve experienced. My quick history in a nutshell Web design and coding is a second career for me. After 15 years of owning and operating a photography studio and processing lab (back in the film days - yup - I’m old), the digital camera came along and changed that industry, which necessitated a new career for me. I shifted to video production, which led to motion graphics and finally to web design. Our little agency now offers all those services. The web design clients never needed anything fancy so JavaScript took a back seat to HTML & CSS only sites for a number of years. JavaScript & GSAP: false starts and other obligations I first discovered GSAP a few years ago, but only tried it briefly. It looked cool, but with the time obligations of field video work and motion graphics jobs, it wasn’t something I could work into the schedule. Besides that, it was JavaScript – too complicated I thought. I knew JavaScript was the third piece of a good web designer’s skillset along with HTML and CSS, but I always convinced myself that I didn’t have the time and the sites we built didn’t need it. JavaScript Books + Classes = Fail I did make a few attempts at reading some JavaScript books and working through some online tutorials, but it just never ‘stuck’. Maybe the examples were too theoretical and dry or they were the wrong books and classes. I really don’t know, but I abandoned the learning process a number of times. Cut and Paste mentality Why did I really need to learn anyway? You can just Google what you need, cut and paste some code and presto – you’ve got some working JavaScript or jQuery. I only understood a small portion of what I was cutting and pasting, but hey… it worked so the problem was solved. That’s how I operated for quite some time. What’s a loop? What’s an array? What’s an object? Who cares? Wait a minute. This is ridiculous. Last spring, I was remodeling our company website and I had all these grand visions about making things move and behave in certain ways. Googling for code just wasn’t cutting it. I suddenly felt stupid. “This is ridiculous!” I thought. I should be able to learn how to write my own code. Oh yeah, I remembered that GreenSock thing I had looked at a few times and abandoned. That might work. Maybe I could actually learn how to use it this time. I become a forum lurker I started lurking in the shadows of the forum. After reading a lot of posts, I saw people asking many types of questions from simple to crazy complicated (at least to me). Two things I noticed were that every effort was made to find an answer (no matter the difficulty level of the question) and not one post was condescending or snarky. That’s quite rare on the ol’ interwebs, isn’t it? Hmmmm…maybe I’m in the right place. Oh boy… time to ask a question of my own One of the great things about learning GSAP is you’ll also pick up a lot of other JavaScript and/or jQuery along the way. I kept reading and practicing with some simple tweens, but now I had a question. Dare I post? I suppose, like many others, I feared looking like an idiot even though the forum members and moderators seemed quite nice and helpful. I do several dumb things every day so you’d think I’d be used to it by now. Oh well, here goes. My first question had to do with the indexOf() a Draggable snap array. Within 30 minutes, Diaco and Rodrigo had posted great answers and neither one called me stupid! Yay – how cool. I get hooked on GSAP and the forum About that same time, I decided our company should discontinue on-site video production and switch to studio only filming. I got tired of lugging loads of video gear in and out of buildings – it’s quite tiring and as I mentioned earlier – I’m old. This freed up some time and I decided to dedicate that time to learning GSAP and maybe, one day, even helping others. It wasn’t too long and I actually knew the answer to a forum question. I posted some information and wow – a little red indicator lit up on my control panel. Someone liked something I wrote. How fun – I’m hooked. Carl makes direct contact I continued to learn and experiment. I posted a few additional questions of my own, but I tried to answer more than I asked. If someone posted a question for which I had no answer, I tried to look it up in the docs and figure it out. Most of the time I was far too slow and Jack, Carl or one of the mods would already have the answer posted before I was done reading the question, but it was an interesting way to learn. I did sneak in a few good answers, which led to a private message from Carl. He thanked me for participating and helping in the forums. I thought it was pretty cool that a super smart guy like Professor Schooff would take the time to do that for little ol’ me. My decision to dedicate time to the platform and forum was reinforced. Blake and I have a conversation I don’t recall if it was a back and forth in a forum post or a private message conversation, but Blake told me something that, of course is obvious, but it stuck with me and is important for all of us to remember. He mentioned that we all enter this learning process knowing nothing. If someone of Blake’s considerable skill level can be humble enough to remember first starting out in code, there may be hope for me after all. I guess if you think about it, there was a time when the simple concept of a variable was brand new to all of us. We’re not born with these abilities. They’re learned and we’re all at different points on the educational path. Never feel stupid for not knowing something. Moderator Promotion Throughout the last year, I’ve continued to learn and study both GSAP and JavaScript. Some of those books I abandoned in the past even make sense now. I’ve tried to be active in the GS community and answer as many forum questions as possible. If I’ve answered a question of yours, I hope you found it somewhat helpful. I’ve cranked out some fun CodePens and finally started a Twitter account to tweet them out. I am nowhere near an expert with GSAP or JavaScript, but I know so much more than I knew a year ago. Apparently I know enough to be entrusted with a forum promotion to Moderator status. I’m honored to be included on such an amazing team. 12 months down – what’s next? My agency duties are still numerous so I can’t dedicate full time to coding, but it remains something to which I’m committed and thoroughly enjoy. I started this 12-month GSAP journey just wanting the ability to write my own code rather than cutting and pasting the work of others. I’m confident I have achieved that, but I still have days when a simple piece of code just won’t coalesce in my brain and that can be frustrating. I guess we all have those days, right? I make several mistakes every day, but that’s o.k. too. I learn a lot more from my screw-ups than I ever do when it all goes right on the first try. I plan to keep learning and getting better and when I get stuck, I’ll be able to get an answer from this amazing community. I’ll continue to give back to the GS community by answering any questions that are within my abilities to do so. The super mods: Jonathan, Blake, Diaco and Rodrigo Thank you to my fellow moderators. You guys rock and have taught me so much. @Jonathan – if there is a browser bug, quirk or special fix that you are not aware of, I’ve yet to read about it. Your knowledge has helped me fix many pieces of code before they even became a problem. Plus, if I ever have a question of top/left vs. x/y, I know who I’ll ask. @Blake – if I could be half as good at coding as you, I’d be a very happy guy. Your work always teaches and inspires me. I don’t think you’re allowed to ever stop posting on the forum or we may all show up on your doorstep and ask questions. @Diaco – your code is always so concise. I deconstruct some of your pens and am astounded by how much you squeeze out of a few lines. If I made some of your pens from scratch, I’d have 20 variables, 5 loops, 12 tweens and 80 lines of code. You do the same with two variables and 4 lines of code. Amazing stuff. @Rodrigo – when searching the forum, I often land on one of your past posts and learn a lot. Your knowledge is vast and I wish you had more time to post around here. Your ninja skills are incredibly strong. Our superhero leaders @Carl – I’ve participated in several online forums ranging from graphic design to 3D to video production, but the GreenSock forum is the best and a big part of that is you. You not only provide great answers, but you do it in clever ways with just the right amount of humor thrown in here and there. The collection of videos you’ve made is invaluable and should be mandatory viewing for anyone interested in GSAP. I’ve seen you monitoring the forums at all hours of the day and even on weekends. When you get any sleep I’ll never know, but I thank you for your dedication and sharing your knowledge. @Jack – how you had the vision to start GreenSock and write the first version of the animation platform I can only imagine. I’m glad you did because GSAP is such an amazing collection of tools. The friendliness of the community is definitely following your lead. I don’t understand a lot of what you talk about sometimes, but I know enough to be amazed by your brilliance and talent. You call yourself just a guy who geeks out about code, but you’re more than that. You’re a smart and generous innovator who’s created a special brand and place on the web. I think I can safely speak for the community when I say we all appreciate the time and effort you put into helping us make beautiful and high-performance animations. Thank you sir. The epic conclusion. Well… maybe just a regular conclusion. If you didn’t read the whole post, I don’t blame you. It’s ridiculously long and I’m just some guy you don’t know so I’ll wrap it up with this bit of advice. Whether you’re a genius or feel like an idiot, it doesn’t matter. Try to learn one new thing each day and before you know it, a year will have passed and all those little bits will add up to new skills and abilities. If you’ve never posted on the forum, please jump in and participate. The more voices we have around here, the more we all benefit. If you need an answer, please don’t be afraid to ask a question. Believe me, I’m just some goofy guy in front of a computer. If I can learn this stuff, so can you. As I begin my second year in GreenSockLand, I’m looking forward to learning more, seeing everyone’s work and answering as many of your questions as I can. This is an amazing community and I encourage anyone reading this to set up an account and get involved. My best to all of my fellow GreenSockers. See you around the forums. - Craig (PointC) PS I made a little CodePen to commemorate my one-year forum anniversary. It’s how I felt before and after discovering the power of GSAP. Enjoy.
  5. 8 points
    Here's a super rough and quick version that I did. You could probably smooth out some of the paths in Illustrator a bit more even.
  6. 8 points
    Hello @Rager and welcome to the GreenSock forum! Its always best to only run your animation when the DOM (HTML and or SVG markup is loaded and ready) and the window is fully loaded (images, links, fonts, stylesheets, js, and other media assets) Try this so you only run your GSAP code when DOM and Window is loaded and ready: // wait until DOM is ready (html and svg markup) document.addEventListener("DOMContentLoaded", function(event) { // wait until window is loaded (images, external JS, external stylesheets, fonts, links, and other media assets) window.addEventListener("load", function(event) { // makes sure it runs after last render tick window.requestAnimationFrame(function() { // GSAP custom code goes here }); }); }); Happy Tweening!
  7. 8 points
    The word React is like the Bat-Signal for @Rodrigo. If we need him, perhaps we just fire up the Rodrigo-React-Signal.
  8. 8 points
    The secret sauce... Wave === Sine.easeInOut
  9. 8 points
    Good news: Google pushed GSAP 2.0 to their CDN recently (for use with DoubleClick and AdWords ads): TweenMax (most popular): https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_2.0.1_min.js Everything else: https://s0.2mdn.net/ads/studio/cached_libs/timelinelite_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/timelinemax_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/tweenlite_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/scrolltoplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/cssplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/easelplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/raphaelplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/bezierplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/cssruleplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/roundpropsplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/modifiersplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/directionalrotationplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/pixiplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/colorpropsplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/textplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/attrplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/endarrayplugin_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/easepack_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/draggable_2.0.1_min.js https://s0.2mdn.net/ads/studio/cached_libs/jquery.gsap_2.0.1_min.js Notice they removed the MD5 hashes that made the old 1.18.0 links so cumbersome. Yay Google! Codepen also updated their "Quick Add" menu to point to 2.0.1. If you get news of other ad networks that have similar news to share, feel free to post here. Enjoy!
  10. 8 points
    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!
  11. 8 points
    Nice demo!!! I was working on a SVG module for PixiJS. Resolution independence!
  12. 7 points
    As @mikel mentioned, you'll probably want two timelines as this animation is not a reverse() situation. One other option would be to create one timeline and then addPause() at the halfway point. Then resume() when the mouse leaves. Something like this should work. Happy tweening.
  13. 7 points
    Hi @Kalimeromax I don't think a master timeline is a good idea for what you're doing. All your timelines repeat, but with different durations, so they aren't synced with each other. And the infinite repeat creates another issue. When you reverse a timeline, it's going to play in reverse for however long it has been playing forward i.e. its .totalTime(). That's why some of your reverse animations take longer than 1 second to complete. See if this is more of what you were going for. On hover enter, I adjust the totalTime as if the animation where on its first iteration.
  14. 7 points
    I'd certainly recommend what Jack has done in his answer, but another way to do it would be setting the SplitText divs to position:absolute and animating the left position. This isn't as versatile and animating x/y instead of left/top is usually preferable, but depending on your animation, this could work too. Happy tweening.
  15. 7 points
    Hi and welcome to the GreenSock forums. Thanks for the demo. That's a pretty cool way to make a rotating sphere. The API makes it pretty straightforward to detect the midpoint of an animation. For any given animation you can query its duration() or progress() to get the "halfway" or mid point var tween = TweenMax.to(something, 10, {x:100, ease:Linear.easeNone}); to start another animation when that tween is in the middle you would schedule it start at a time of tween.duration() * 0.5 //or tween.progress(0.5) And, yes I'd use a timeline to schedule one tween to start at the midpoint of another. An issue with your setup is that your elements are dispersed all over the globe initially and each rotate 360 from their current position. So let's say an element is exactly behind the globe, if you fade it out halfway through its animation it will fade out when it is in front of the globe. no good. My first step was to set up every element in a vertical half-ring around the front of the globe and get them all to rotate the same way and fade out at the same time once I got that working I then randomized the started progress of each elements timeline using progress(Math.random()) A big component to this is using a SlowMo ease with yoyoMode set to true at the right time to get the elements to fade out and back in. https://greensock.com/docs/Easing/SlowMo I could probably take 2 hours explaining all this, but hopefully this gives you something to play with and tweak. --- Another approach might be to use an onUpdate callback to map the current rotationY to a range of opacities so that its opacity will be a factor of its rotation.
  16. 7 points
    Hi @cgorton How are you making out? I didn't recognize you without a avatar. Learning the basics of canvas isn't that hard. Instead of declaring what you want the browser to display with CSS and markup, you write instructions to draw stuff. It works a lot like Logo programming (turtle graphics), which is a programming language for children. You tell the turtle where to go with very simple instructions/commands. With canvas, the context is the turtle, and that's the only thing you can really interface with. https://turtleacademy.com/lessons/en Having only 1 object to work with can be quite limiting, so the solution it to create your objects to work on. If you had some CSS and an SVG... <svg> <style> #rect { fill: #2196F3; fill-opacity: 0.5; stroke: #111; stroke-width: 2; } </style> <rect id="rect" x="20" y="100" width="200" height="150" /> </svg> ... it could be represented as a simple object like this. var myRect = { x: 20, y: 100, width: 200, height: 150, fill: "#2196F3", fillOpacity: 0.5, stroke: "#111", strokeWidth: 2 }; Now you can tween that object as if it were an a real element. If it's a number, GSAP can animate it. The properties you use and how you name them is entirely up to you. The context has no concept of your objects, so do what makes the most sense. You can also make optimizations by reusing objects. Notice how the line has 3 different strokes applied to it. With SVG, that would require 3 different elements. The only way to end a path is to call context.beginPath(), so you can keep applying different styles to the same path. If you haven't already, check out these threads. CSS tricks. It's a little advanced, but it shows some nice rendering techniques. https://css-tricks.com/using-gsap-animate-game-ui-canvas/ I would also recommend going through every property and method on MDN. It's very helpful, and most of the pages have demos. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D MDN also has some pretty good tutorials. Some of the stuff is dated, but it's fine if you're just getting started. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
  17. 7 points
    As @GreenSock already had provided you solution, the only reason I posted that because you mentioned you wanted to recalculate values on resize. But svgs are scalable so resizing won't really change values unless you recalculate your paths manually so I thought you could just do same thing in canvas instead. But of course you know what fits in your requirements. Thanks. Just to clarify, canvas draws paths just like svg, just you have to do all the stuff manually. You can also support different pixel density, so raster etc isn't really an issue. Ya the Path2D is not supported by all browsers, but the pollyfill works in IE 9 as well without any significant performance issues. If you paste the url while in editor mode then it will get embedded.
  18. 7 points
    Couple of days ago I was working on something out of personal interest. I didn't have any plans to post it in the forum, it was meant to be a PM to @GreenSock I haven't spent more than couple of hours on it so it is not complete and I haven't tested it for performance. Few days ago there was a question about using drawSVG for canvas, so I wrote little class as experiment that will do it. Today I saw your question and I modified it to support path modification. Bonus: You can use MorphSVG on it. Though all browsers don't support Path2D so you will need pollyfill for that. See if you can use it. Also, what I am doing is very little and I have too much freedom to do it, while GSAP is really big library and every change has to be considered for any side effects and if enough users need it.
  19. 7 points
  20. 7 points
    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 }); }
  21. 7 points
    Looks like they're using canvas for that effect. @Sahil has a nice demo and tutorial about canvas mouse follow in this thread: You could make it happen with SVG too, but canvas would probably be a bit easier in this case. Good luck and happy tweening.
  22. 7 points
    If what you're looking for is to have the width of the container tween but have the children tween their `y` position stuck only to the Y axis (no movement on X following the parent's tween) there are a few things that can make this possible. Easiest would be to use a Timline and have the children tween up after the parent has completed (or nearly completed) its width tween. Next option would involve a few wrappers, an `overflow: hidden`, and a `position: absolute`... here is a CodePen illustrating both.
  23. 7 points
    Hello everyone! I've finished* working on my personal website and thought I'd share it here, both because I think it's cool and also because feedback is always welcome and useful It's built with three.js but virtually all the animations are handled with GSAP. Feel free to poke around and ask me if you want to know how I approached things. https://robin-v.net *Obviously, it'll never be *truly* finished... I'm sure I'll start finding lots of stuff that needs fixing now that I've shared it, and regardless I'd like to integrate a Grav-powered blog in the future. But, you gotta show it at some point! Cheers
  24. 7 points
    Here is simple example. Trick is to animate scaleX so element looks like it transitions out and new element comes from left and changing transform origin of your element. Also animating scale instead of width gives you far better performance.
  25. 7 points
    Ah! what your code does at the moment, if I'm not mistaken, is create a new timeline for each scroll event – and there can be hundreds or thousands of scroll events per second when the user is scrolling! I assume you don't want thousands of identical timelines First of all, you should create your timeline outside of the scroll function. Just create it anywhere and make it paused, like you're doing now. By the way, instead of what you have, you can use this: docTimeline.to(".lightLogo", 1, { y: "200%" }) .to(".text", 1, { x: "0%" }); It's exactly the same thing, just saves you some typing. Inside your timeline, use addPause() to automatically pause it at certain points. Then, when the user scrolls, use resume() to unpause it To change the direction it's playing in (depending on whether the user is scrolling up or down), you can use reversed(). That should be enough. Lastly, have a look online at the concept of throttling and debouncing, to limit the amount of events that do get handled (there's no reason to have so many per second, you can ignore most of them without anyone noticing). Here's a recent post of mine about it: https://greensock.com/forums/topic/18197-gsap-slider-over-scroll/?tab=comments#comment-83832
  • Newsletter

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

    Sign Up