Popular Content

Showing most liked content since 03/20/2018 in Posts

  1. 8 points
    I got sliiiightly carried away and made this, haha. I don't if it will help because I saw @Rodrigo and @PointC had provided great answers so I didn't bother commenting the code, but feel free to ask if anything is intriguing. PointC, thanks! hehe
  2. 8 points
    Hi and welcome to the GreenSock forums!! A looooooooong time ago I made this for another question in the forums. It uses the draggable tool to move the numbers but you could easily use it to get started with what you need: I made a fork of it and changed a bit to simulate what you need: Hopefully this helps. Happy Tweening!!!
  3. 8 points
    Nice job @Sahil! A while back I was toying with the idea of releasing a tool that'd make this sort of thing easier but I put it on the backburner for a while. I called it "BendyBox" - it basically lets you convert any DIV or RECT into an object thats bendable in various ways. It swaps in an SVG to create those effects and you can register various animation effects that you easily call later, like "drop", "spin", etc. Advanced demo: Basic (with quasi-documentation in comments): Again, not sure if we'll make it an official GreenSock tool yet, but I figured this is a good place to share about it. Feedback is welcome.
  4. 7 points
    Okay, I just re-read your question and I think I understand what you'd like to happen. Since you're a Club member, you have access to CustomBounce and CustomWiggle: https://greensock.com/wiggle-bounce Using that, you could easily wiggle an element and have another element drop from it. Here's a quick demo with a couple basic divs. Hopefully that points you in the right direction. Happy tweening.
  5. 7 points
    Hi @Valeria Welcome to the forum and thank you for joining Club GreenSock. As @Acccent mentioned, there would be a whole bunch of ways to approach this. Here's my two cent approach for you. I'm not sure if that is even close to what you had in mind, but maybe it will give you some ideas. Happy tweening and welcome aboard. @Acccent - congratulations on your Moderator promotion. Well done!
  6. 7 points
    Did someone say like a ferris wheel? I had this laying around from 4 years ago. Great stuff, Craig and Blake!
  7. 7 points
    It's actually a pretty straight forward series of steps to pull of something like this. Depending on other project requirements, things will vary here and there. But the main idea is to establish a number of planes and to make elements on those planes move at differing rates ... typically, the closer the plane to "you", the faster the elements will move by. Here is a quick CodePen explaining the principles of it.
  8. 7 points
    Great examples, guys! Here is another approach from @OSUblake using the ModifiersPlugin which isn't necessarily simple, but it is dynamic. Blake's ModifiersPlugin collection: https://codepen.io/collection/AWxOyk/ more on ModifiersPlugin: https://greensock.com/modifiersPlugin If you're animation is canned, as you say, Shaun's solution should work very well.
  9. 7 points
    You'll want to use relative offsets to allow successive tweens in the timeline to being before the previous one completes. Here is an example of that in action: And more on sequencing here: https://greensock.com/get-started-js#sequencing
  10. 7 points
    Well, you *can* get the x/y of the tweening element at any time in the tween. Craft your timeline in a paused state ... use .progress() to position the playhead at a specific point after your initial tween is defined. Then retrieve the top/left at that point to use as the values in your second tween. Finally, play the tween from 0.
  11. 7 points
    An even easier way to do this is to make the stagger value negative .staggerFrom(".box", .8, {y:60}, -0.15)
  12. 7 points
    You can do that by using CustomBounce and CustomEase. Check docs and following video on how you can do it, https://greensock.com/docs/Easing/CustomBounce
  13. 7 points
    How can you disagree with that when you're already experiencing difficulty? That kind of proves my point. Angular1 has nothing in common with the current version besides the name. But what I was trying to get at is that there's a bunch different ways to create and customize CSS for theming, usually with some type of build process. This isn't directly related to CSS styling, and is more for SVG, but look at how easily an animation can be added to an app. There are similar tools for styling components just like that, but I can't remember the names of them right now. A component is more of an architecture or pattern. Web Components and Polymer are where you'll find most of the widget stuff. I'm not a UA developer, so I don't know a lot about the specs, but animating width and height has nothing to do with them. It invalidates the layout, and has to recalculate the size and position of everything and make any necessary adjustments, which can kill your framerate. It's no different than doing a screen resize. This is unlike transforms, which cannot affect other elements or the layout. Nope. I know how that app works, and it doesn't use a library. Go back to that site, disconnect from the internet, and then refresh the page. It should be working offline. The lag you saw was because it was your first time visiting the page, so a service worker was fired up to install some stuff for offline use. Well I didn't coin that term. That was done by Paul Lewis over at Google. I learned a different version, called a Relative Animation, which might be a better description, but nobody knows what that is, so I don't use it anymore. Every animation in GSAP has a start and end value, so there's nothing unusual there. In the Last step is where you would apply or remove any CSS classes/styling. You put the element in it's end state. The Play step really doesn't apply to GSAP as it will automatically play. That's more for people who have to manually start the animation. And this is where you get everything wrong. There's a time difference between screen refreshes, typically around 16.67ms, so you won't see it change visually. The invert step is the most important part, and is what pulls everything together, but you're not seeing the big picture yet because you think it can be done with className tweens. Can you get these two animations working correctly using className tweens? The video should not jump around when you toggle it. It's using the same CSS and layout from the original demo. This should animate between a column and row when you hover over it. And yes, there is a way to animate it. I'll explain more about this in another post.
  14. 7 points
    Trying to build a complicated UI library using only className tweens will be difficult. My advice would be to avoid them. They're really not that useful, and can cause all sorts of problems if you're not careful. If you really want to animate classes, then you should use CSS. You might want to look into how modern frameworks like React, Vue, and Angular use css, or the lack thereof. CSS in JavaScript is pretty common nowadays, making CSS files completely optional. Animating properties like height and padding aren't any better. Look at what animating height triggers. https://csstriggers.com/height The browser spends a lot of time rendering a nice looking web page for you, and then on every animation frame you come along and destroy it. That makes the browser sad. 😢 To make the browser happy you'll need to leverage transforms. Instead of changing the width or height on every animation frame, you can reduce it down to 3 layouts/reflows using a technique called FLIP. First - Record the initial state of your element, like its position and dimensions. Last - Move your element into its final state, and record those values. Invert - Now move your element back to where it came from. You now know all the values that will be needed for a transform based animation. Play - Play the animation. The browser will go back to being happy again. I came across a couple FLIP animations that I though were pretty neat, and wanted to make them with GSAP. What I ended up with was the start of what could be a nice library for doing FLIP animations with GSAP. It's pretty easy. Just pass in the elements you want to animate, a modifier function, and some animation options. The modifier function is just a function that will change the element in someway, like toggling a class, or moving it somewhere else in the DOM. var video = document.querySelector("#video"); Flipper.flip(video, videoModifier, { duration: 0.5, ease: Sine.easeInOut }); function videoModifier() { video.classList.toggle("minimized"); } There are no width or height animations in this demo. It's all done with scaling. I'm making use of the new ExpoScaleEase for counter-scaling. Good idea? This is something I might be interested in making into a library if there's demand for it.
  15. 6 points
    Hello Fellow GreenSockers, Well its that time again, The Mighty @Carl has just made and posted another great video tut about: Easy SVG Drag & Drop with GreenSock Draggable Keep in mind if you haven't done already please subscribe to the GreenSock Learning YouTube Channel so you don't miss out on this goodness. https://www.youtube.com/channel/UCFPckx3BFK_GvJag82CjDlg And here are the codepen to boot: Happy Tweening
  16. 6 points
    Forget Avengers: Infinity War. This summer’s must-see film is the latest offering from GreenSock Studios. Grab the kids and head to local multiplex for the next showing of ‘Easy SVG Drag and Drop with GreenSock's Draggable’ Academy award winning director Carl Schooff transports the audience into the jungle of SVG with his mastery of the craft. He knows how to get the most from his .icon actors. The fade and scale performances are completely believable and sure to win a multitude of awards. Nice job @Carl I honestly have no idea how someone could watch one of your videos and not immediately start using GSAP after seeing how easy it is to use.
  17. 6 points
    Hi and welcome to the GreenSock forums. Yeah, it looks like you just need to give your logo element a css position value. It's just a css requirement that you can't change the left or top of something unless it has position set to relative, absolute or fixed. try: .logo { position:absolute; } We tried to make note of this in the video but it can be missed: https://greensock.d.pr/OssUPB In most cases its better to animate transforms (x/y) instead of position (left/top). Hope this helps. Let us know if you hit any more bumps in the road. We're happy to help. Carl ps. Definitely check out this thread on using CodePen its a great way to learn GSAP and makes it super easy for us to help you
  18. 6 points
    Tough to see what is happening here with just a few lines of code ... if possible, a CodePen would give us a better opportunity to help. But, I suspect your issue is due to translating the `X` value vs changing the `left` value. The tween is affecting `x`, so the style.left property will remain unchanged. So we have to get its translated value relative to its initial offset.
  19. 6 points
    Hi miks, you probably need a debounced function for this – a function that only activates once if it keeps getting called without a minimum time passed between two calls. https://css-tricks.com/debouncing-throttling-explained-examples/ You can either make one yourself, or use one that comes with lodash or underscore.js, or use this one that uses GSAP behind the scenes (and which I made): https://codepen.io/Acccent/pen/OQxjOx If you do use that one, you can do so like this: $window.on("mousewheel DOMMouseScroll", stipple(<your call>, {delay: x, leading: true})); (delay is the time that needs to pass without any scroll events before a next call can happen.)
  20. 6 points
    The code is certainly based on the I Hate Tomatoes tutorial. It seems to take you through the project fairly well I would suggest going through it again to make sure you have implemented it properly and contact author as Carl suggested. FWIW it appears the initial function 'init' looks for any slides that don't have the class 'active' and makes them invisible. At the start none of the slides have this class so they are all made invisible. Try adding class 'active' to first slide in the html on load may fix it. <li class="homeSlide slide01 active">
  21. 6 points
    Hi and welcome to the GreenSock forums, Don't worry we do the whole "rough" thing here. We'll do our best to help you. I appreciate that you made a demo, but unfortunately I couldn't get it to display anything. Very odd that there are no errors either. We really have to focus our support in helping people understand the GSAP API. Debugging a complex slideshow that doesn't work at all is just a bit beyond what we have the resources to do. It would really help if you could reduce the demo to the bare essentials of just having something basically running that illustrates the issue. I noticed your code looks very similar to that from a tutorial from my friend, Petr Tichy: https://ihatetomatoes.net/greensock-tutorial-create-simple-image-slideshow/ If you are using his demo as a starting point for your project, you might want to leave a comment / question on his blog. Anything you can do to reduce your demo down to something that illustrates the problem with as little code as possible will go a long way in helping us help you. We certainly want to help you understand GSAP, but its pretty hard or us to try to reverse-engineer what looks to be code for a nearly full project.
  22. 6 points
    Hi @KerryRuddock How about something like this? Hopefully that helps. Happy tweening.
  23. 6 points
    I was putting together a quick pen and was basically going to say everything @Acccent said ... so I'll spare the detailed response ( thanks @Acccent! ) I've simplified what you originally provided to help illustrate some key things (and because this can be done more simply). You can add some complexities based on what you need, but the gist of it is allowing your selectors to do the work (i.e. look for child <ul>s and show/hide them) rather than explicitly calling out each one. I whittled down the CSS to quickly identify the position and visibility of <ul>s within the heiarchy. Also, because you're tweening height, it makes it easier to initially grab the <ul> height and store it as an element data-attribute to be used as a return value within a function-based value to Tween to. Accessibility is a big factor here and you'll want to address that ... I added some simple focusin and focusout to show an example of how to handle that.
  24. 6 points
    Hi @James Neufeld You can change the source of an image.
  25. 6 points
    Hey Mikel, I went through the docs of rough js, unfortunately it doesn't give you a rough path that you can use to morph. They have this generator object but the rough path is buried deep inside the object and split into an array. Not an easy way to access it and use it. It does have simple commands that you can use but that is going to be a lot of work to do. Maybe you need to find any other library that generates rough paths for you that you can use to animate. First method that I found to do it using rough js is to draw new rough path on each frame, but animation looks too rough(no pun intended). You can adjust roughness for smoother animation. Another way would be to use delayed callback to limit the paths you draw every second, Anyway, where have you been? How are you?
  26. 6 points
    @alahmadiq8 Oh wait, one more example using the ModifiersPlugin.
  27. 6 points
    Hi @alahmadiq8 Welcome to the forum. How about something like this? I just grouped the contents of the circle and rotated it in the opposite direction with an equal duration and ease. Hopefully that helps. Happy tweening and welcome aboard.
  28. 6 points
    Hey everyone, I just spent some time fighting with MS Edge so I though I'd post a quick tip about it. I needed to pull some SVG text from a center point and stretch the spacing to the edge of a rectangle. Easy enough I thought. I'll use text-anchor="middle" and tween the textLength to the width of the rectangle. That worked perfectly in Chrome, but Edge wasn't in the mood to play nice. I won't bore you with all the details, but basically Edge will correctly use the middle text anchor for initial setup. However, when you try to animate textLength along with that attribute, it reverts back to text-anchor="start' so the letters won't space apart correctly. They'll all space out from the left. Not good. Edge also has a problem reporting back the textLength for an animation start point. I opted to use the BBox of the text to get a starting point for GSAP to animate the textLength. To overcome the anchor problem, I centered the text BBox and then animated it to x:0 while the textLength animates which will give the illusion of spacing from the center. While on the subject of textLength, I came across another little oddity last week. I often animate SVG text along a textPath by tweening the startOffset attribute, but I thought I'd try adding some textLength with it to space out the letters a bit and found some strangeness. When you set your initial textLength attribute, Firefox only works with that on the actual text element, but Chrome only works with that attribute being set on the textPath element. A bit odd. Here's a quick demo showing the behavior. I used two tweens on the timeline so you can easily comment out either if you want to see the weirdness. The animation along the path works no matter what, but the textLength attribute placement is a bit fussy between Chrome and FF. Of course, Edge doesn't work at all no matter where you put the attribute. Big surprise. It will animate along a path just fine, but when you use a textPath element it doesn't seem to care about textLength. Hopefully this helps anyone trying to do some interesting SVG text animations. If anyone needs me I'll be over at the MS campus protesting their fussy browsers. Happy tweening everybody.
  29. 6 points
    Well I see two problems, 1. You are using this.previewCase() with parenthesis so it executes function and returns undefined to add method because your function doesn't return anything. 2. Your function takes id as parameter. If I understand correctly, it takes id of single element and animates it. So in this case you are passing nothing to it. So you want to animate all elements you will need another function that does it. Makes sense? I have never used react plus that's a lot of code to go through. @Rodrigo Might be able to help you but he previously has spent a lot of time helping you. I would suggest you to start small before starting to build something too complex. If you are just getting started with GSAP and/or React, I will also suggest to just create your effect in plain JavaScript before implementing it with React.
  30. 6 points
  31. 6 points
    Hi @SoldierCorp Welcome to the forum. You can also turn that into a loop to tidy things a bit. Doing that would also give you the option of creating a separate timeline for each group and the first one could restart before the last one ends to create even more of a 'wave' feel. Just my two cents worth. Happy tweening and welcome aboard.
  32. 6 points
    You know, the problem here is there are just too many cool things available in GSAP.
  33. 6 points
    Hi @mrtips I'm not sure what your final project will be doing, but here's a slightly different take on your request. By using Draggable's endX and endY I have one div chase another after you throw the first one. I'm not sure if that'll be helpful for what you're doing, but thought I'd throw it out there as an option. Since you're a Club GreenSock member (thank you), you also have access to the ThrowProps plugin which has a cool velocity tracker if that is part of your master vision. More info: https://greensock.com/docs/Plugins/ThrowPropsPlugin https://greensock.com/docs/Plugins/ThrowPropsPlugin/static.getVelocity() Hopefully that helps. Happy tweening.
  34. 6 points
    Try moving your "$('.planet').hover ..." to be within $(document).ready(). I dont' think they are ready when the script tries to bind the hover event handler to them. $(document).ready(function() { TweenMax.to(".planet-name", 0, { xPercent: '-50' }); // ----- PLANET HOVER ------ // $(".planet").hover(function() { console.log("help me"); TweenMax.to($(this), 0.5, { scale: 1.8 }) TweenMax.from($(this).siblings(), 0.5, { bottom: "-40%" }) TweenMax.to($(this).siblings(), 0.5, { opacity: 1, }) }, function() { TweenMax.to($(this), 0.5, { scale: 1 }) TweenMax.to($(this).siblings(), 0.3, { opacity: 0, bottom: "-20%" }) }); });
  35. 6 points
    Here you go. There was a whole lot of slightly weird stuff in the codepen I forked, some things that had no use and other things that didn't follow the same coding style, as if someone else had modified the pen but still saved it in @Jonathan 's account... I'm not sure what happened there... anyway, I cleaned it edit: changed the image service to loremflickr since apparently unsplash is down...? also now it picks 10 different pictures
  36. 6 points
    You can't animate option tags, plus styling them consistently is almost impossible. You can instead use something like jQuery UI which replaces your select tag with custom HTML that you can style or animate as you like. There are many other libraries/frameworks that do same thing but be sure to check if they are accessible.
  37. 6 points
    I just came across a video, coincidentally it turned out to be about processing js. Few years ago I had bookmarked processing js page but never really went through it. So just out of curiosity I visited processing js page and realized now that has become p5js. https://p5js.org/examples/hello-p5-flocking.html Anyway, I was going through their examples page and came across this flocking demo that wraps particles around the canvas. I removed all the flocking code, here is basic wrapping demo. But wrapping isn't big deal, following snippet from demo is for wrapping. Boid.prototype.borders = function() { if (this.position.x < -this.r) this.position.x = width + this.r; if (this.position.y < -this.r) this.position.y = height + this.r; if (this.position.x > width + this.r) this.position.x = -this.r; if (this.position.y > height + this.r) this.position.y = -this.r; } There might be more unnecessary code that you can clean up step by step.
  38. 6 points
    Hi @Saul Rosenbaum and welcome to the GreenSock Fourm! Don't be too hard on yourself. That dreaded /latest/ in the TweenMax JS script has taken a shark bite out of many. At least you were able to figure it out and get it all sorted! Happy Tweening!
  39. 6 points
    Hi @lisartur I'm not sure if you meant preventing additional clicks during the active tween or you wanted it to count each click and continue? If it's the former, I'd add an isTweening() check like this: More info: https://greensock.com/docs/TweenMax/static.isTweening() If it's the latter, I'd probably just increment/decrement a rotation variable and feed that into the tween. That way if you click 10 times, you'd end up at -900 degrees. Maybe something like this: Hopefully that helps. Happy tweening.
  40. 6 points
    For what it's worth ... ScrollMagic is a bit unnecessary here (unless the CodePen isn't displaying the entirety of the project). This could be handled with a simple paused timeline where the current scroll position progresses the Timeline. Also, using some X positions rather than "left" could help. Lastly, I'm a fan of using background images on divs and moving the divs (using X/Y) rather than moving the backgrounds because of the hardware acceleration. Here is a quick codepen taking ScrollMagic out of the equation and using the users scroll position to progress a Timeline. I didn't spend to much time on making sure the timings match up, but it should give you the idea.
  41. 6 points
    Hi @TomWWD You can add an infinitely repeating tween to a timeline and the next tween will go after the infinite tween finishes its first iteration. You do have to be using TweenMax 1.20.0 or later. Your demo is currently using 1.18.2 which is over 2 years old. More info here: If you need to control that particular infinite tween separately from the main timeline, you could also create a tween or timeline for that repeating animation too. It would make it easier to control. Hopefully that helps. Happy tweening.
  42. 6 points
    The MorphSVGPlugin will only change the path data, the stuff inside the d attribute. <path id="start" d="M129.06,46.05" /> To change the fill, you will need to set that yourself. function morph (){ TweenMax.to("#start", 1, { morphSVG:{shape:"#end",shapeIndex: 12}, fill: "#ff0000", ease:Bounce.easeOut }) }
  43. 5 points
    Hi @Chelsea and welcome to the GSAP forums! A few things I would do in this case. First, I would use a Tween to position the playhead by frequently polling the audio's currentTime/duration by using setInterval, clearing the interval onPress and recreating onRelease (in addition to the audio controls that happens in those events). I prefer an interval to an audio ontimeupdate event because ontimeupdate's frequency is all over the map. That way it's a simple positioning (as a % or the overall scrubbers width) vs modifying a timeline's playhead (i.e. progress) in parallel. That way you can remove all your timeline stuff and use a simple Tween with the setInterval. Hope this helps!
  44. 5 points
    I think the easiest win here, if I understand correctly, is to just wrap the 6 in another div. rotate the outer "#number" for what you are calling scale, and rotate the inner "#number div" for the number to spin around its center <div id="number" style="position:relative; top:60px; font-size:48px;"><div>6</div></center> Doing multiple transforms on an element and changing the transformOrigin is just generally difficult.
  45. 5 points
  46. 5 points
    Waw thank you so much for the quick response . @PointC Thank you for sharing your solution. It way more easier and concise! @OSUblake This is exactly what I was looking for. This is such a great resource! I apologize for the duplicate question. Again Thank you for the prompt response!
  47. 5 points
    Hello @thomasfoskolos and welcome to the GreenSock forum! Here is an example of animating a CSS pseudo-element using the GSAP CSSRulePlugin. Keep in mind that when using GSAP for this you have to use the old CSS syntax using only one colon (:) instead of the new double colon syntax (::). To target multiple <h1> tags individually you either have to add a unique id or class to each <h1> tag. Or target them by their index or in CSS :eq() or :nth-child. The below example shows animating two <h1> tags, each rotating but at different times. More info on the CSSRulePlugin Docs: https://greensock.com/docs/Plugins/CSSRulePlugin Happy Tweening!
  48. 5 points
    Sorry - that's my fault. I dropped those yoyos on the tweens and restarted from the 'back' label. I think you wanted to replay from the start label. How's this?
  49. 5 points
    Hi @ceindeg Edge is being a bit fussy lately with masks. If you add a tiny rotation to the tween, it'll force Edge to redraw the mask. Something like this. tl.from(".mask-anim", 2, {ease: Power4.easeOut, rotation:-90.01, drawSVG:"0%"}, 0.3); This is actually the same odd issue we were discussing in this thread. Hopefully that helps. Happy tweening.
  50. 5 points
    You will need to use Linear.easeNone ease on each tween for smooth transition. You can also set it globally for all tweens if you want.