Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Leaderboard

  1. GreenSock

    GreenSock

    Administrators


    • Points

      95

    • Content Count

      16,376


  2. PointC

    PointC

    Moderators


    • Points

      78

    • Content Count

      4,325


  3. OSUblake

    OSUblake

    Administrators


    • Points

      74

    • Content Count

      5,944


  4. Cassie

    Cassie

    Administrators


    • Points

      62

    • Content Count

      109


Popular Content

Showing content with the highest reputation since 04/14/2021 in all areas

  1. Not exactly like the example button - a lot less liquidy, but fun nonetheless! https://codepen.io/cassie-codes/pen/15d1e3d339a64bbed746895dff4990b9?editors=0010
    7 points
  2. I remember these two canvas based examples not GSAP specific. But each impressive none the less yielding similar result. https://codepen.io/waaark/pen/VbgwEM https://codepen.io/Zaku/pen/JNxKKY
    7 points
  3. Hi Stefano, Glad you are enjoying the courses. Thanks for providing such a clear and reduced demo. There are a few ways to do this but I will start with a fairly basic approach to see if that works for you. To chain these 2 timelines together you can add them both to another timeline, often called a master or parent. GSAP 3 Beyond the Basics has some lessons on this. https://codepen.io/snorkltv/pen/abpaPEJ?editors=1010 notice your child timelines are no longer paused and they are added to master. your button now controls m
    6 points
  4. Throw in a radius animation, and then you can change how big the circle is. The allows for the height of the wave to be dynamic. For example, it can start out small, and then get bigger, or vice versa. https://codepen.io/osublake/pen/edbed4a5ee29e65a49cc60f9868e7d7b
    5 points
  5. This is the basis for a wave. Try playing with different values here... var delay = norm * 1.5; tl.to(obj, { angle: Math.PI * 2, ease: "power2.inOut", duration: 3 }, delay); https://codepen.io/osublake/pen/eb9ad45d903c076f2c47ee1ea3981b2a
    5 points
  6. Ahaha! I forgot about that one. ✨ *peers cautiously at the code*
    5 points
  7. You could maybe update this older example by @Cassie to GSAP 3 as a possible starting point to work from. 😉 https://codepen.io/cassie-codes/pen/bzXLOr
    5 points
  8. In case anyone else comes across this like I did, having trouble with GSAP animating from one clip-path to another: make sure both clip-paths are using the same units, including any zero values. For example, trying to animate from this: clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); to this: clip-path: polygon(-100% 0, -100% 0, -100% 100%, -100% 100%) wasn't working, but when I changed the zero values to percentages, it worked perfectly. // From clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) // To clip-path: polygon(-100% 0%, -100% 0%, -100%
    5 points
  9. Hi @Whitfield, You certainly can do it with a clip-mask ... https://codepen.io/sgorneau/pen/GRrXVZx?editors=0110 But, I like the control that is afforded by animating a parent container within a wrapper, especially when it comes to tweening other properties at the same time. What's the reason you are hoping to move away from a wrapper? Is it the extra markup? If that's the case, you can have Javascript create the wrapper, that way your markup stays lean/focused.
    4 points
  10. that opens the door to a whole bunch of logic issues such as what do you do if some tries to close the panels while they are still opening? In last week's video in B-sides, Bonuses, and Oddities I go over the perils of using 2 timelines for distinct enter and leave animations. See below although this lesson focuses on a simple "rollover" effect the same concepts can be applied to your click-driven animation. other approaches involve creating animations on demand (by calling functions which create those animations) but there are some pros and cons that I
    4 points
  11. It's just a way to do circular motion, which is nice because of the way it repeats itself. However, I'm not doing the X movement, so it only moves up and down. This shows how to do X movement, Y movement, and how combining them makes circular movement. https://codepen.io/osublake/pen/a0076b0d032987820eab6f41bde10246
    4 points
  12. Hello @Wemnia If I am getting you right, the 'delay' you are experiencing is actually not caused by the delay property of the tween but by the duration of the tween. If you change the duration of that tween to 0.0 (it has a default duration of 0.5), you will see there will only be a very minimal delay (which is probably just inevitable due to the reaction-time of the code or something). Instead of a .to() tween with a duration of 0 you could also just use .set() there. And if performance-wise you wanted to go for the absolute best approach, you might want t
    4 points
  13. I added my wave technique to Cassie's pen, so a little more complicated. I also added in the direction detection, so the wave starts on the side of the button you hover over. https://codepen.io/osublake/pen/388bae8d0f760b3e16887d63cfc10a29
    4 points
  14. My recommendation: don't do that. As a user, I hate when the UI seems unresponsive to my interactions because they've blocked things until animations finish. I think it's much better to make it instantly reactive, and just generate some new dots if necessary. Here's a fork of @OSUblake's that has a dot pooling system, where you can just request a certain number of dots and it'll pull them from the Array if they're not currently "active" (animating). If it can't find any, it'll generate new ones and put those in the Array. So it reuses things as often as it can for performance reas
    4 points
  15. Everyone was a beginner at some point, even the super smart folks like Blake. ☺️ You have to be bad at something before you're good at it! There's no magic matrix knowledge-download.
    4 points
  16. Hi @limbo After pondering this thread I figured it was worthwhile to explain why 2 timelines doesn't work so well and also show a "single timeline" solution. I made a video that premieres pretty much now... Here are some demos Simple https://codepen.io/snorkltv/pen/MWJVWwy More Complex https://codepen.io/snorkltv/pen/12598b629fa6d41468fdc8e60ee896ba Multiple https://codepen.io/snorkltv/pen/MWJVYeQ?editors=0010 Enjoy!
    4 points
  17. Welcome to the forums @RichSock I'm not sure if I missed something totally obvious, but if I did, I'm sure someone will come around and correct me. I don't think there is an integrated method in ScrollTrigger that would let you do that just like that. But you could always check whatever element you want to animate is in view currently with a simple helper function like covered here and not create a ScrollTrigger for that element in view. That could then look something like this. https://codepen.io/akapowl/pen/bb6edc7f1c3918d3c44570032de18ca5
    4 points
  18. You could use gsap.utils.toArray() to get all the regions, pop and shift the first and last item out and then add them to the timeline with different animations? https://codepen.io/cassie-codes/pen/c449bf643f0af06592f6b289b3dd55e6?editors=0011
    4 points
  19. Just change the duration to your liking. Here's an updated GSAP3 version. https://codepen.io/PointC/pen/35157203ee19d7bc5cac465995fc69b8 Happy tweening.
    4 points
  20. Ah, sorry about that - I hadn't noticed the resizing complications. I have updated the helper function accordingly: https://codepen.io/GreenSock/pen/gOgWELo?editors=0010 Better?
    4 points
  21. Yep this file 1182084.js starting at line about 13363. It’s a very point-y button. 😁 Though the effect is not nearly as dynamic (unique) as it first appears. It’s in essence just performing a wave of points going right or left based upon mouse location. Instead of being fully dynamic like the canvas example above. A poor man's approach might be to use the classic SVG filter gooey effect to help get results using a key object moving right/left without having to manipulate individual points. Though given it’s not as dynamic as it first appears you m
    4 points
  22. Ah, so you don't really want it totally linked to the scrollbar. Sure, you can just alter the timeScale of the animation(s) with a single ScrollTrigger. Here's a simple example (forked demo): https://codepen.io/GreenSock/pen/rNjvgjo?editors=0010 I created that roll() helper function just to make it simple to create a looping animation where it clones the element, puts it right next to it, and makes it look seamless. I animated the timeScale so that the change is smooth rather than suddenly shifting direction. Is that what you're looking for?
    4 points
  23. They're either animating every single point by hand... https://codepen.io/osublake/pen/7c235b8b3c2d9bb6cecea6acfff7ff37 ...or already have the paths calculated ahead of time, and doing a frame-by-frame animation. Sorry, but there is no easy solution here.
    4 points
  24. Performance problems are typically caused by graphics rendering hogs, like in your case you're using mix-blend-mode: difference and I'd suspect that's rough on the CPU. A few other things I noticed: Your animations are quite a bit different between the two versions - you're not comparing apples to apples. You've got multiple ScrollTriggers, but only one ScrollMagic scene. Your timings are different, you've got more things overlapping in the ScrollTrigger version, etc. You're animating "width" and "height" properties for 4 seconds WHILE animating "left" in the ScrollTrigger
    4 points
  25. AI doesn't usually export an open path with a stroke as a closed path with a fill. A regular export should work just fine. Looking at your demo shows a few problems again. The paths in the masks look like they are just copies of the four letter pieces. They need to be open paths with a consistent stroke-width. Here's an image from the tutorial above. See how the four paths over the letter pieces are just open paths with a stroke wide enough to cover the underlying artwork? I'm using various colors here just to show the pieces but keep in mind the fact the strokes need t
    4 points
  26. This in particular is a *wonderful* article https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/
    4 points
  27. You can use the endTrigger property for those kind of scenarios. endTrigger String | Element - The element (or selector text for the element) whose position in the normal document flow is used for calculating where the ScrollTrigger ends. You don't need to define an endTrigger unless it's DIFFERENT than the trigger element because that's the default. From the docs: https://greensock.com/docs/v3/Plugins/ScrollTrigger Following examples uses the first cirlce as the trigger-element (when it comes into view) and the third circle as the end
    3 points
  28. please see line 105 I changed it from .add(background) to .add(background.tweenTo(background.duration())) https://codepen.io/snorkltv/pen/KKaGBYG?editors=0010 I'm pretty sure when you replay the timeline it didn't know that you had messed with the playhead of background with that tweenFromTo() at the end. Short story: if you are going to use tweenTo() and tweenFromTo() don't also add the timeline as a child. *edit: be sure to pause the background timeline also
    3 points
  29. Hey @Metaloholic, Welcome to the Greensock Forum, There are some ways. Here is an option: one ScrollTrigger, 2. tween is positioned e.g. '+=2' https://codepen.io/mikeK/pen/abpRmNN Happy scrolling ... Mikel
    3 points
  30. Looks like you're changing the width in multiple media queries, but not changing the height. That seems to be locked in at 685. I think adding height: auto in your CSS here should fix things: .mainmmmdrop { position: absolute; right: 100px; overflow: visible; opacity: 1; height: auto; } You also have some invalid CSS in your 825px media query. @media all and (max-width: 825px) { .mainmmmdrop { max-width: 90vw; width: 1000; height: 685: } } Setting the width and height there shouldn't even be necessary since you have those attributes already in place on t
    3 points
  31. Here you go. This example makes use of a timeline and tweens on width and height instead of x and y https://codepen.io/akapowl/pen/11246dff1111c03bd97e6d26db190f25
    3 points
  32. Hey @smokeNinja - welcome to the forums. To me it looks like codepen has some problems because the external CSS from a different pen that is linked to in the CSS-settings is simply just not being loaded. If you include it in the codepen itself it works as before. https://codepen.io/akapowl/pen/cfba359300b1ff1d9b3ad70c1ac2c5d2
    3 points
  33. I've had that happen with Inkscape. Maybe you just need to set your viewbox / file-dimensions straight ( File > Document Settings - In there there should be a box with your file's dimensions and one with scale. Make sure to set your file's dimensions AND viewBox to the dimensions of the container in your HTML and the Scaling to 1 - I hope that makes sense, because I am actually using Inkscape in German localization ) As already mentioned just drawing out the paths in a vector editor would probably be the easiest way for this to work properly. All these paths here have been m
    3 points
  34. Love the split text addition! This is a good place to start. I've learned so much from his videos. https://www.youtube.com/user/codingmath/videos
    3 points
  35. Amazing. My approaches always feel so clumsy next to yours. 😂 I really want to get more comfortable with utilising maths more in coding over the next while. I tidied mine up a little more. Pretty happy with how jolly it feels. Might pop it on my website. https://codepen.io/cassie-codes/pen/LYxBZEG?editors=0010
    3 points
  36. Hey @bartmc Thanks for being a Club member. Your thread seems to have been missed yesterday. Sorry about that. Here's an auto-play slider with prev/next buttons originally made by @OSUblake and updated to GSAP3 by @GreenSock. I think it should have most of what you need. https://codepen.io/GreenSock/pen/GRJwLNP Happy tweening.
    3 points
  37. Here's a start. https://codepen.io/osublake/pen/2875503ec594830f0a2cd6766cf5bf41
    3 points
  38. Here's how I've handled different enter and leave animations. Pretty simple, just keep track of whether it's hovering or not, and if an animation already exists. It shouldn't jump as every animation will play all the way through. https://codepen.io/osublake/pen/cf405db44771640f24f2381119f6c3cf
    3 points
  39. You can check out @ZachSaucier's article: https://css-tricks.com/tips-for-writing-animation-code-efficiently/ Tip #8 is all about returning tweens/timelines from functions and adding them to a master. Happy tweening.
    3 points
  40. This should work. MASTER_TIMELINE .add(SPINNER_TIMELINE) .add(HERO_TIMELINE) If those timelines are paused, just add .play() to them. MASTER_TIMELINE .add(SPINNER_TIMELINE.play()) .add(HERO_TIMELINE.play())
    3 points
  41. Thinking about it, you could probably just use that with a thicker stroke. https://codepen.io/osublake/pen/PdKBXP
    3 points
  42. Making the wave isn't hard. But putting the points in an array is the busy work admins don't do. That's a hint, hint.
    3 points
  43. Yep. You'll usually want everything contained in the SVG so setting up a background rectangle gives you a nice viewBox size that won't add funky transforms to paths and other elements when you export. I show the differences in the tutorial above. That should be about right. Happy tweening.
    3 points
  44. Hello there. This recent thread asked the same thing (and it even used the same picture as you to demonstrate the issue). It contains a suggestion of mine how you can deal with this. As mentioned in that thread, what you are facing is a general problem - on resize wanting a container to automatically adjust it's height based on children's heights that have position absolute. That is not related to GSAP in the first place. Give my suggestion in that thread a shot, and if you run into issues along the way, we can see how we can help you from there
    3 points
  45. Yeah, I agree with Blake here unfortunately. I've got a lot of experience with SVG and I would struggle to recreate this. I would probably approach it like a sprite, create a series of paths for every step of the animation (because I'm stronger setting up in illustrator) and then do an animation using keyframes gsap.to('.startPath', { duration: 1, keyframes: [ {morphSVG: step1}, {morphSVG: step2}, {morphSVG: step3}, {morphSVG: step4}, {morphSVG: step5}, {morphSVG: step6}, {morphSVG: step7}, {morphSVG: step8}, {morphSVG: step9} ] }) But eve
    3 points
  46. Yeah, in recent versions of GSAP, if you kill() an animation that has a ScrollTrigger attached to it, it'll automatically kill() the ScrollTrigger too. 👍
    3 points
  47. gsap doesn't know what's in your css. It has to use the computed style to determine the start values, which returns a matrix. If you have x/y components in your css transform: translate3d(0px, 100px, 0px); That's going to return a 2D matrix, so gsap will do the switch. If you have a z component transform: translate3d(0px, 100px, 1px); That's going to return a 3D matrix, so it's going to keep it 3d. But like I said earlier, if you want it to always be 3d, just set force3D to true. gsap.to(foo, { x: 100, force3D: true // always uses 3d })
    3 points
  48. I couldn't resist digging in a little ... A few pointers first: You don't need to set delay: 0 anywhere - that's the default. You don't need to pause things initially and then play them later on the same "tick". They'll play automatically. You're using the old syntax. Put the duration inside the vars object. It's totally wasteful to use an onDrag() that keeps checking to see if the element has been dragged a certain amount and then firing your animation. That was firing literally on every drag, so you were creating a ton of overlapping tweens. Just use D
    3 points
×