Jump to content
GreenSock

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

Leaderboard

Popular Content

Showing content with the highest reputation on 08/15/2019 in all areas

  1. Might want to check someone’s history, skill set, and experience before you accuse them of trolling.
    5 points
  2. Now that I think more about it -- History, skill set, and experience aside - Shaun's correct that I should not have called OSU a troll. I had a very stressful day yesterday, and was a bit sensitive. Not an excuse and I apologize for my quick retort.
    4 points
  3. I know it's solved, but just to chime in - if your goal is to add a perspective(999px) to the transform while it's animating, you could try doing an onUpdate: tl.tl(element, 2, {scale:0.7, onUpdate:function() { element.style.transform += " perspective(999px)"; } }); Just a thought. It could be made even easier with a helper function that'd automate some of that. Anyway, happy tweening!
    4 points
  4. Sorry if it came off that way. I brought up CSS grid because animating tables can be very problematic. Tables were not designed with animations in mind, which is why you still have to use attributes to get some table elements to display correctly. And there is usually more than one way to solve a problem. Using CSS grid was part 1 of my recommendation. You called me a troll before I got to part 2 below. The gaps are caused because of rounding. An 81px wide element at a scale of 0.786 is 63.666000000000004 pixels. Not exactly a whole number, so you might see artifacts bleeding through. To get rid of those gaps, you can use will-change: transform; in your css. The browser can rasterize (take a snapshot) of the layout before scaling gets involved. https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
    3 points
  5. Why are you even using a table? Tables are designed to display data. If you want a table-like layout, then use CSS grid. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
    3 points
  6. Hey @qqignatqq You mean the space under the last GreenSock? If you do not like this, take another approach. https://codepen.io/mikeK/pen/dybMdpx var action = new TimelineMax({paused:true}) .to('.wrapper',1,{y:-wrapperHeight+350, ease: Sine.easeInOut}); Best regards Mikel
    2 points
  7. That's very tricky indeed, as you're trying to use a native "click" listener instead of Draggable's built-in onClick functionality, but you're still making the same element draggable and in my opinion that's a bit risky because various browser handle things very differently. For example, some browsers require that you preventDefault() on the initial pointerdown/touchstart/mousedown event in order to avoid touch-scrolling while you drag...but if you preventDefault() at that point, then when you pointerup/touchend/mouseup, it won't recognize it as a "click" even if you don't preventDefault() that final event. Other browsers DO treat that as a click event regardless. I could go on and on about all the differences and bugs in browsers surrounding touch/drag/click behavior. In your demo, it looks like sometimes the browser would dispatch the native "click" event first, but other times it lagged just a tiny bit behind the pointerup/touchend/mouseup event that Draggable taps into. I made a timing adjustment in this version of Draggable which seems to resolve this particular issue: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js but beware that it can't possibly solve other inherent issues related to trying to mix native event handlers with draggable events. Unfortunately, dealing with all the various browser quirks is just a nightmare. Draggable does a really good job of normalizing things that you run through it, but if you're trying to straddle between letting it handle some things and using native events for other things...well, good luck with that I can only really control what Draggable does with its own behavior. Hopefully that tweaked version helps. I'd love to hear how it performs for you.
    2 points
  8. Thanks @Rodrigo This helps. I'll set my timeline up like this now: const [tl] = useState(new TimelineMax());
    1 point
  9. Hi, As mentioned before I haven't had time to dig deeply into the Hooks API and all I can offer right now is a simple example but no real explanation on how it actually works, sorry about that. Here is a live sample using a Timeline instance with React hooks: https://stackblitz.com/edit/gsap-react-hooks-timeline-instance-toggle As you can see it uses a useEffect at first run in order to create the timeline and then you can add all the child instances you want to the timeline. Unfortunately this doesn't works: let tweenTarget = null; const tl = new TimelineLite({paused: true}); useEffect(() => { tl .to(tweenTarget, 0.5, {x: 100}) .to(tweenTarget, 0.5, {y: 100}) .to(tweenTarget, 1, {rotation: 360}) .reverse(); }, []); useEffect(() => { tl.reversed(!toggle); }, [toggle]); Even though in the useEffect callback triggered by the toggle update, tl is defined and it's reversed state is updated, nothing happens. This is the part I can't give you a proper explanation about. For the foreseeable future just work with the timeline in the initial useState and then in the useEffect add the instances, like in the live sample. As soon as I have an official explanation about this, I'll post it here and in the other threads dealing with hooks. Happy Tweening!!!
    1 point
  10. Hey vanSk, You should be able to do this by adding a delay after the staggerFromTo that you're using there, then adding another animate to the timeline to show the button, and then it will loop indefinitely since you set the repeat to -1 on the timeline. Is there a particular part of the process that you're running into trouble doing?
    1 point
  11. The distance per scroll is set by the easing in the timeline. So if you want a consistent scroll distance no matter where it is scrolling, remove the easing like so: var action = new TimelineMax({paused:true}) .to('.wrapper',1,{y:-wrapperHeight, ease: Power0.easeNone}); The other tween is tweening to a particular progress, so you can change the ease based on up or down if you'd like, as mikel showed. https://codepen.io/GreenSock/pen/MWgyrME?editors=0010
    1 point
  12. If you'd like the eases to be the same scrolling both up and down, then just put something like TweenLite.to(action, 1, {progress:progress, ease: Power3.easeOut}); You can change the ease to whatever you'd like. Mikel was demonstrating that you can have a different ease for scrolling up and down if you'd like to.
    1 point
  13. Problem solved. Thanks so much for your help. I wouldn't have solved it without the information you gave me.
    1 point
  14. I think I found something that works. var resizeTimeline = new TimelineMax(); resizeTimeline.to($ani_holder, 0, { perspective: 999, x: x_pos, y: y_pos}).addCallback(startAni, 0); The above "perspective: 999" for some reason fixes the actual animation below. Then I use your OnComplete suggestion in order to fix the final rendering. (it renders those gaps when it finishes if I don't) No idea why this works, but it seems to do the trick. tl.to($feathers, 6, {rotation: '180'}, 'start') .to($background_cover, 8, {left: '300%'}, 'start') .to($frame_border, 3, {scale: 1}, 'start+=1') .to($frame_border, 3, {alpha: 1}, 'start+=1') .to($frame_background, 3, {perspective: 999, scale: 1}, 'start+=2') .to($frame_background, 3, {alpha: 1, onComplete: function() { document.querySelector(".frame-background").style.transform = "perspective(999px) scale(0.999)"; }}, 'start+=2').addCallback(fixBackground, 0) .to($h1, 3, {scale: 1}, 'start+=2') .to($h1, 5, {alpha: 1}, 'start+=2') The object "$ani_holder" holds my entire animation. I scale this using window resize (as to be responsive). Then the $frame_background is the table that I scale from 0, and had the issue with.
    1 point
  15. I understand that it doesn't currently work in the latest version of GSAP. I said it should work For some reason when GSAP converts the transforms to what should be an equivalent matrix, it doesn't fix the issue in Chrome. Maybe @GreenSock can give us more info on that. The good news is that in the next version of GSAP, matrices are no longer created for transforms, so the above code would fix the bug. In your project it might be best to use an onComplete for the .to() in order to set the transform to the working one in my last post. https://codepen.io/GreenSock/pen/VwZajqQ?editors=0010 Alternatively, you could animate this one piece in non-GSAP code for now (at least until the next version of GSAP comes out).
    1 point
  16. Thanks for the demo! This boils down to a miscalculation in Chrome. In Firefox is looks great, as it does at a scale of 0.5 in Chrome (for me at least). The trick is to work around this bug is to set the perspective to something slightly different (like 999px compared to the default of 1000px). You should be able to do that in GSAP using the transformPerspective property, but the below doesn't seem to work in this case (but setting the transform manually to transform: perspective(999px) scale(0.786); works just fine). resizeTimeline.to('#ani-holder', 0, {transformPerspective: "999px", scale: 0.786, transformOrigin: "50% 50%"}); Setting perspective: 999px; on the parent doesn't seem to fix it either. Chrome be weird. I've asked Jack to look into it. So far he said "Hm, never seen that before"
    1 point
  17. Hello Forrest and welcome to the forums! As Blake said, you've stumbled upon an edge case of browsers. You can use a different variable name or just use a string like ".top" to work around this issue. Happy tweening.
    1 point
  18. You can't use the variable name top at the global level because it refers to something else. https://developer.mozilla.org/en-US/docs/Web/API/Window/top Just rename your top variable to something else.
    1 point
  19. Any chance you could provide a reduced test case? I'm curious about this. Keep in mind that some browsers cannot report an SVG's bounding box unless it's visible in the DOM.
    1 point
×