Jump to content
GreenSock

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

Leaderboard

  1. ZachSaucier

    ZachSaucier

    Administrators


    • Points

      216

    • Content Count

      1,523


  2. GreenSock

    GreenSock

    Administrators


    • Points

      159

    • Content Count

      13,861


  3. mikel

    mikel

    Moderators


    • Points

      86

    • Content Count

      1,099


  4. OSUblake

    OSUblake

    Moderators


    • Points

      83

    • Content Count

      5,062



Popular Content

Showing content with the highest reputation since 12/20/2019 in all areas

  1. 4 points
    Well as @PointC mentions above you can use ScrollMagic, he actually wrote a guest article (tutorial) on it which can be found here. But ScrollMagic appears behind regarding support for IntersectionObserver and GSAP 3 as seen in these few examples. https://github.com/janpaepke/ScrollMagic/pull/920 — GSAP 3 https://github.com/janpaepke/ScrollMagic/issues/918 — GSAP 3 https://github.com/janpaepke/ScrollMagic/issues/751 — IntersectionObserver Alternatively there is scrollama which does use IntersectionObserver. It is quite similar to ScrollMagic and continues to recieve updates. I have not tested it yet with GSAP 3, so do let us know how that goes if you (or anyone else) do so. I’m slightly surprised @GreenSock hasn’t just made one of his infamous and clever ’whipped up” helper functions leveraging IntersectionObserver for passing in GSAP timelines or tweens. So the staff can stop saying "ScrollMagic is not a GSAP product" here on the forum and that it might not be the best option (ha, ha), instead just point all references to that in house approach. ? You can also simply use vanilla IntersectionObserver on your own without the need for a library, you will find plenty of examples here within the forum.
  2. 3 points
    For future readers: Note that if you need to animate only some of the border radiuses or animate the radiuses in different ways, you can do so by animating the specific properties like borderTopLeftRadius, borderBottomRightRadius, etc.
  3. 3 points
    Hey MeLight and welcome to the GreenSock forums! Thanks for being a Club GreenSock member. The main issue here is that elements with display: inline (like spans by default) aren't affected by transforms like your attempt to animate the x property. If you use GSAP to set the display to inline-block instead, it will animate in the x direction. However, you need to make sure the spaces between elements are retained, so I also added spacer elements in the demo below. https://codepen.io/GreenSock/pen/wvBxWJx?editors=0010 Side note: .innerText is more performant than .innerHTML if all you're doing is changing text
  4. 3 points
    Hey @Sangam Basnet, Here is an option. Pay attention to the new structure. https://codepen.io/mikeK/pen/QWwQagQ Happy tweening ... Mikel
  5. 3 points
    Hey @wcomp, Let GSAP do all transform jobs: clearer and more practical https://codepen.io/mikeK/pen/vYEWNPy Info to transforms and transformOrigin e.g.: here. Happy tweening ... Mikel
  6. 3 points
    Hi, Welcome to the GreenSock forums and Happy New Year!!! I actually never dealt with something that specific such as checking for a single value in such way. When dealing with TDD I try to keep GSAP instances out of it because is not actually that trivial to do it. Keep in mind that React is basically used to create UI's, hence any TDD using it should consider that there is an effect to any update in the app state that can be checked. In this particular case you're checking an attribute of an SVG element so you can use the toHaveAttribute expectation given by jest-dom, all you have to do is query the target element and check the attribute value. Also in your code you have this for the initial set up: { value = false, onClick, scale = 1, radius = 16, length = 120, borderWidth = 1, borderColor = '#333', knobColor = '#c0c0c0', onBackgroundColor = '#228b22', hasBoldText = false, onTextColor = '#ffffff', offBackgroundColor = '#b22222', offTextColor = '#ffffff', duration = 0.5, style = null, } And this for rendering the text element: <text ref={onTextRef} id="on-text" x={-(length * 0.5)} y={radius * 1.42} fill={onTextColor} fontSize="20" fontWeight={hasBoldText ? 'bold' : 'normal'} stroke={borderColor} strokeWidth={borderWidth / 2} > OPEN </text> So the initial position is -(length * 0.5) and that is -60. Nowhere in your code I see anything that changes the initial position of onTextRef to a positive value. Please try to create a Codesandbox sample since you can include testing there as well, in order to get a live editable code that we can look at. Finally I'm not very fond of TDD everything in React since it forces to add a bunch of extra code and boilerplate in the JSX and sometimes the logic of components that is not really necessary beyond testing that some part of the component is rendered or not due to some data received from a server request or a specific user interaction. Honestly I'd like to think that the fact that you can encapsulate your components (even re-usable ones) should be enough for securing that extending a component doesn't create issues. As a personal opinion I'm not really a big fan of TDD since a code that is well written doesn't need a safety net to work, but is a trend now a days so we're forced to follow it whether we like it or not. Happy Tweening!!!
  7. 3 points
    Hi @Hossein Rahimi, I'm not entirely sure what you have happening in your animation, but I believe the slow/delayed feel you're getting may be because of your tween's duration is causing the tweens to stack up (you're telling it to do a new 0.5s tween to a new value on every tick). Instead of this, you may want to consider using gsap's quicksetter method for this: https://greensock.com/docs/v3/GSAP/gsap.quickSetter() The other way would be to define your animation first, and use scroll position to update the tl.progress() I also prefer to use gsap's ticker (https://greensock.com/docs/v3/GSAP/gsap.ticker) over requestAnimationFrame(), but that's a personal preference thing (performance will be very similar)
  8. 3 points
    Seems like GSDevtools was causing some conflict, removing it fixed the issue. https://codepen.io/Sahil89/pen/VwYWeZX
  9. 3 points
    Ok - here's a quick try https://codepen.io/mikeK/pen/xxbrKKQ Happy tweening ... Mikel
  10. 3 points
    Like this. .to('#panda *', { duration: 2, scaleX: 1.2, scaleY: .85, y: -18, rotationX: 15, rotationY: -15, rotationZ: 2, ease: "elastic", stagger: 0.015 }, 0.2) .to('#panda *', { duration: 2, scaleX: 1, scaleY: 1, y: 0, rotationY: 0, rotationX: 0, rotationZ: 0, ease: "elastic", stagger: 0.015 }, 0.4) More advanced stagger options. https://codepen.io/GreenSock/pen/vYBRPbO Simplified easing using strings. https://greensock.com/docs/v3/Eases
  11. 2 points
    @ZachSaucier that's because there was literally no color applied at all, so it's treated as transparent. Here's a simplified version that seems to work for me (unless I'm misunderstanding the goal): https://codepen.io/GreenSock/pen/mdyzBXN?editors=0010 There are actually a ton of other ways to do this, @shanemielke. Does the above example work well for you or would you like some other options? You probably don't need an onUpdate, though that's perfectly acceptable if you prefer to go that way.
  12. 2 points
    No. You likely don't need to register the plugins at all since you're just using plain HTML files. You need to load all plugins in their own script tags after GSAP is loaded but before your build file.
  13. 2 points
    Hey kailin and welcome to the GreenSock forums. Good work converting most of it to GSAP 3! The biggest issue is that .progress() can't be negative in GSAP 3. So you should use GSAP's .wrap() utility method to keep it in the range of 0 and 1. I went ahead and straight converted the pen you used as a reference to GSAP 3 because I thought it'd be simpler for me to debug: https://codepen.io/GreenSock/pen/JjomKjq?editors=0010 Just applying that fix to your demo makes it function well: function updateProgress() { animation.progress(gsap.utils.wrap(0, 1, transform() / entireSize)); } Keep in mind that InertiaPlugin requires at least a Shockingly Green Club GreenSock membership. We'd love to have you join the club!
  14. 2 points
    It's working correctly. I think your understanding of how animations work is a little off. An animation will update about every ~16.67ms, so the chances of it updating on every number change are practically 0. You would have better luck playing the lottery. To get it working like you want might take some work. You will need to make sure a number is not already in the array, and fill in any missing numbers between the last number in the array and the current number.
  15. 2 points
    That's not true - we recommend that people put the duration inside the vars parameter in GSAP 3 but they are allowed to put it as the second parameter if they want. Anyway, it's unrelated to this issue in Firefox. Your pen is still not working the same as other browsers for me at least (on Catalina). Your misreading my post and whats in my code block. The 2nd parameter for GSAP 3 gsap.to() is the vars parameter. That is what i wrote and what's in my codepen. I have the duration parameter in the vars, which is the 2nd parameter of the gsap.to() method! I see it animating in latest Firefox Windows 10 with that change.
  16. 2 points
    Many thanks Mikel. You are awesome. 5 Star for your work and reply. Regards, Sangam Basnet
  17. 2 points
    Hey @bootstrap007, this could be an option function resizeCheck(){ var progress = action.progress(); //record the progress so that we can match it with the new tween (jump to the same spot) action.kill(); //rewind and kill the original tween. bezier().progress(progress); //create a new tween based on the new size, and jump to the same progress value. } https://codepen.io/mikeK/pen/poveLRo Happy tweening ... Mikel
  18. 2 points
    I assume it's because you've got a quickSetter() that's setting the "x" and "y" directly, and then you're ALSO creating a tween in a "mousemove" that's trying to make x/y go to other values instead. x and y can only be one value at a time Maybe you should create a wrapper and then just tween the inner element to control the relative position (side flipping), and the container for the overall position.
  19. 2 points
    Hey @bootstrap007, try this var wh = window.innerHeight; tl.to('#ball', .50, { width:wh, ease: Power2.easeOut }); // and a separate tween TweenMax.to('#ball', 2, {rotation:360, transformOrigin:'center', repeat:-1, ease: Linear.easeNone}) and please use the new gsap 3.0 Happy tweening ... Mikel
  20. 2 points
    Looks like that was already fixed in the upcoming release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js. Sorry about any confusion there. And yes, @ZachSaucier is working on a fix for that codepen embed issue. ?
  21. 2 points
    You have to change the mod values to ones that you want, the ones I made are just for example. https://codepen.io/GreenSock/pen/KKwXVBw?editors=0010 It would be good for you to take a few minutes and try to understand my approach. I'm happy to help.
  22. 2 points
    Hey BFreakout and welcome! There are several methods that you can use to do this. The first that came to my mind is to use MotionPathPlugin, especially if your conveyor belt and items are all SVG (but they don't have to be - it just makes resizing easier). Motion paths made with it aren't responsive by default, but you can kill and old instance and re-create it when you need to. I recommend fake physics rather than trying to use real physics. By that I mean use a motion path that doesn't go straight down and you could use a separate tween (applied to a container <g> most likely) that adds some rotation if you want to as well. If you really and to do something with physics, you could look into this library: https://github.com/subprotocol/verlet-js
  23. 2 points
    Sure, you could use MorphSVGPlugin's stringToRawPath() method to convert a path data string into a RawPath (which is always cubic bezier based) and rawPathToString() to convert that back into a path data string. Like: var pathData = "M0,0 C10,20,15,30,5,18 M0,100 C50,120,80,110,100,100"; // any valid path data, not limited to cubic beziers var rawPath = MorphSVGPlugin.stringToRawPath(pathData); var cubicPathData = MorphSVGPlugin.rawPathToString(rawPath); Is that what you're looking for?
  24. 1 point
    Yes, I'm certain. You can tell from the text in your pen. Here's a minimal demo that shows it very clearly: https://codepen.io/GreenSock/pen/povQKxR?editors=0100
  25. 1 point
    @ZachSaucier I can't repro it on CodePen using the same library versions. I suspect that there's another instance of gsap bundled in my client's global js package. Sorry for not catching this earlier and thanks for your patience!
  26. 1 point
    Ah, I understand what you mean now that you've added the image. You're saying that sometimes in the very last event caused by clicking the button (without the user manually scrolling them self) scrolling is false. This is actually kind of tricky. What I believe is going on (I could be wrong): The window checks for scroll changes even n milliseconds (because it can't check every 0 milliseconds, that's impossible). This is somewhat asynchronous to GSAP's updates. Sometimes that check falls right between when GSAP updates the scroll position for the last time and the onComplete when scrolling is made false, which would report that scrolling is true. Other times, that check falls right after GSAP calls the onComplete callback, in which case scrolling is false. I don't think there's really a way to work around this using the current setup. However, I would do something like the below where GSAP is fully in control of reporting the status of scrolling because it's guaranteed to be in order like you expect. https://codepen.io/GreenSock/pen/WNbgeZj?editors=0010 If, for some reason, you also need to have the scroll being listened to and that variable checked you could enable and disable it during the tween: https://codepen.io/GreenSock/pen/YzPOKaP?editors=0010
  27. 1 point
    I'd do something like this, no need for ScrollMagic. https://codepen.io/GreenSock/pen/KKwBYwP?editors=0010 Notice that you don't need to put quotation marks around numerical values.
  28. 1 point
    Hey jsco, This is the issue. If you try to animate the rectangle along the paths it will be jumpy and not a smooth animation because the paths are poorly formed and their endpoints don't match up. There's no way to fix the jumpiness without editing the paths. The first thing you should do is improve (or have someone improve) the exporting of the lines. This sort of line should optimally be done using one path with only two points and then an arc.
  29. 1 point
    @ZachSaucier is correct - GSAP just uses Math.random(), so unless I'm misunderstanding your goal I don't think seeding is possible.
  30. 1 point
    Yes, it animates. But it animates from 0px to 10px, not 50px to 10px.
  31. 1 point
    Hey @Zahir Rafiq, Another concept. https://codepen.io/mikeK/pen/abzGjJJ The first run (Rerun codePen) is sometimes not as expected. I do not know why. Happy tweening ... Mikel
  32. 1 point
    3.0.5 is officially out now, so you don't need to wait at all Enjoy!
  33. 1 point
    hey ! Many thanks ! I'll try that
  34. 1 point
    Hey @michaeljohansen. Why not pass it as a hex string? like "#228200" https://codepen.io/GreenSock/pen/PowQmVV?editors=0010
  35. 1 point
    Math and physics have never been my strength. So just a little trial and error. https://codepen.io/mikeK/pen/bGNajzW Maybe I should do a course at @OSUblake. Mikel
  36. 1 point
    Hey @Sangam Basnet, Another arrow is now in the SVG, hidden in CSS. Then simply hide or show the arrows with 'autoAlpha'. https://codepen.io/mikeK/pen/GRgyMRd Happy tweening ... Mikel
  37. 1 point
    Hey @Warren_A, Welcome to the GreenSock Forum. GSAP 3.0 is so convenient: var tl = gsap.timeline () .to('.ball',{ x: "random(-20, 20, 5)", //chooses a random number between -20 and 20 for each target, rounding to the closest 5! y: "random(-20, 10, 3)", duration:1, ease:"none", repeat:-1, repeatRefresh:true // gets a new random x and y value on each repeat }) https://codepen.io/mikeK/pen/vYEWqJY Happy tweening ... Mikel
  38. 1 point
    Sorry for the bothering. I found out that I can just ignore the warning. It seems that Google Fonts have already allowed Cross Origin in their headers: access-control-allow-origin:* The issue might be caused by other elements.
  39. 1 point
    I think the approach I have above is good. You can spend more time playing with the value or try to figure out a way to get the exact number using dimensions to further reduce the chance of a jump.
  40. 1 point
    Hey pkid and welcome. This effect is done using WebGL. The pen you linked to above just uses <canvas>. If you are trying to recreate it completely from the ground up it will probably take a while to create because you need to understand WebGL, especially shaders. However, you could modify other similar effects to do that sort of effect like these: https://tympanus.net/codrops/2019/10/23/making-gooey-image-hover-effects-with-three-js/ https://tympanus.net/codrops/2019/10/21/how-to-create-motion-hover-effects-with-image-distortions-using-three-js/ https://tympanus.net/codrops/2018/04/10/webgl-distortion-hover-effects/
  41. 1 point
    While snap is obviously a lot shorter, I don't think it communicates that the value repeats as clearly as increment. And on a much more subjective level, seeing the word snap twice that close to each other in the same function feels weird.
  42. 1 point
    Thanks for sharing, @benoit!
  43. 1 point
    That sounds pretty complicated because the scroll speed of the user isn't predictable. And a scroll event might fire every 16ms (it might be much faster than that with touch), so a lot of what's on the screen can change during those intervals. You would be adding animations to a queue for elements that might be out of view on the next tick, which would be delaying animations that do need to play. To trigger animations when they are in the viewport, I've been using the Intersection Obsever API. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API This demo is set up to animate elements by the row: https://codepen.io/osublake/pen/6fd214ecd74e7091ec7b609bb0270f97
  44. 1 point
    I don't see any issues on my machine, however... It doesn't seem to be as much of an issue these days but in the past having objects on different layers (z-indexes) animating often affected text rendering particularly in Safari, this usually meant you had to play with font smoothing or other font rendering options to fix it. You mentioned you're on an older mac which suggests that maybe it's an older browser as well, that is displaying this type of bug. An article from a few years ago discussing something similar. https://www.lockedownseo.com/webkit-bug-slider-causes-font-weight-changes-on-page/
  45. 1 point
    An even easier way to do this is to make the stagger value negative .staggerFrom(".box", .8, {y:60}, -0.15)
  46. 1 point
    Assuming it does not impact performance I would say it be would desirable. It is rather counter intuitive the way it needs to be handled now and likely to trip up a lot of people. And the resulting code would be simplified and easier to follow when things get complex.
  47. 1 point
    Scale is actually 2 different calculations. var tween = TweenMax.to('.red', 1, { //this value won't matter scale: 2, modifiers: { scaleX: scaleModifier, scaleY: scaleModifier } }); function scaleModifier(scale) { if (scale > 1.5) return 1.5; return scale; }
  48. 1 point
    Hi phillip_vale Your pen had some errors so I just made a new one for you. http://codepen.io/PointC/pen/QEyxLY/ Hopefully that helps a little bit. Happy tweening.
  49. 1 point
    Hi all, It seems the default value for transformOrigin has changed (but not the documentation). It broke some of my older animations that expected the origin in the center. While TweenMax 1.11.8 was fine, my animated bicycle was shattered all over the screen with version 1.15 (or gsap/latest). I thought I'd let you know
  50. 1 point
    Hi potatoDie you can change the transformOrigin with this : TweenMax.set(element,{transformOrigin:"50% 50%"}); pls read the CSSplugin Docs : http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/ http://codepen.io/MAW/pen/MYyzpv
×