Jump to content

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


Popular Content

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

  1. 6 points
    Hey Michael and welcome to the forums! Good work on your site. That is an interesting issue. I noticed that you used different selectors in the dev and production build. I also noticed that you seemed to be animating the .ys-shortcut class in production and that class is applied to both the li and the a of each of those items (and both the li and the a were being animated). So I used my dev tools to remove the .ys-shortcut class from the a and it seems to be working without the increased delay. So I'd recommend removing that class from the anchor and using some other method (like .ys-shortcut > a) to color the anchor text. Happy tweening.
  2. 5 points
    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!!!
  3. 4 points
    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
  4. 3 points
    Are you seeing this on a HiDPI monitor, like a 4k, 5k, Retina, mobile, etc? It might be because you are using a background image, which doesn't adjust for the resolution of the display. I, for one, have never recommended using background position for sprite sheets. I think it's better to use transforms like x and a real image. See #2 in this demo for an example of that. https://codepen.io/MAW/pen/MYdwRP And this demo for a sprite sheet that has rows and columns. https://codepen.io/osublake/pen/LJjpoo Not really. I always have an artist to that sort of stuff for me. It's pretty performant. Using transforms is even more performant.
  5. 3 points
    Hi @Kári Bertilsson Welcome to the forum and thanks for joining Club GreenSock. Have you tried: allowNativeTouchScrolling: false Does that help? Happy tweening and welcome aboard.
  6. 3 points
    You just have to change the offset of the image reveal tween. I think it would be best if you spent some time to understand mikel's approach and what it's doing. Then you can make changes yourself. We can't help you with each and every step of the way.
  7. 2 points
    There seems to be some general weirdness with the overflow-x on iOS. When I test your demo in my iPad, it's just letting the width of the page go out to the full width of the wrapper with all the boxes. I'm no iOS expert, but a Google search showed a few results for overflow-x not being respected. So for your Draggable question — you want the user to be able to press the draggable element and scroll up/down, but once you start dragging left/right you want that up/down scroll to stop? Is there a reason the user needs to be able to scroll the page up and down by pressing the draggable element? I ask because allowNativeTouchScrolling: false would work great for this.
  8. 2 points
    Hey @sumith, Some pointers: //create a timeline instance var tl = new TimelineMax() //the following two lines do the SAME thing: .add( TweenMax.to("#id", 2, {x:100}) ); .to("#id", 2, {x:100}); //shorter syntax! By default, animations are inserted one-after-the-other, but it's easy to control precisely where things go using the position-parameter. I still do not understand, what do you mean by 'scroll 5 time', but here's a fork of your case: https://codepen.io/mikeK/pen/NWKNQwW Happy tweening ... Mikel
  9. 2 points
    That error looks like it is expecting umd/CommonJS modules instead of es modules. I would try loading the umd versions of GSAP. import { TimelineMax, Power0 } from "gsap/umd/TweenMax"; import Draggable from "gsap/umd/Draggable";
  10. 2 points
    The animation will run if you comment out the tl in the second useEffect, which doesn't make a lot sense. https://codepen.io/osublake/pen/38b42207b0a9b5c0514ccc0508da9862 And like you, I haven't dug into the hooks API yet, so maybe I'm missing something obvious.
  11. 1 point
    Hi all I created a prototype some time ago. It has many GSAP animations. I want to focus on the animations that appears when you scroll. For instance the shortcut icons. If you compare my prototype with the production site you'll see that the animations are running slower on the production site. Prototype: http://yousee.grandorf.dk/homepage/homepage-clean.html Production site: https://yousee.dk/ The code is the exact same: import inView from 'in-view'; import { TimelineLite, TweenLite } from 'gsap'; export function heroAnimation() { inView('.hero--animated').once('enter', () => { const items = ['.hero__title', '.hero__lead', '.hero__action', '.hero__legal-text']; const tl = new TimelineLite({delay: .4}); tl.staggerTo(items, 1, {opacity: 1, y: 0, ease: window.Power2.easeOut}, .15) .to('.hero__brand-logo-image', 2, {opacity: 1, ease: window.Power2.easeOut}); }); } export function shortcutAnimation() { inView('.gsap-shortcuts').on('enter', el => { const items = el.querySelectorAll('.ys-shortcut'); const tl = new TimelineLite({delay: .25}); tl.staggerTo(items, .3, {opacity: 1, scale: 1, ease: window.Back.easeOut}, .15); }); } export function mediaboxAnimation() { inView('.media-box--animated').on('enter', el => { TweenLite.to(el, 1, {opacity: 1, y: 0, ease: window.Power2.easeOut}); }); } export function mediacardAnimation() { inView('.gsap-media-card').on('enter', el => { const items = el.querySelectorAll('.media-card--animated'); const tl = new TimelineLite({delay: .5}); tl.staggerTo(items, .5, {opacity: 1, y: 0, ease: window.Power2.easeOut}, .2); }); } What can cause this issue? Any ideas or help will be appreciated a lot. Thanks If you focus on the icons staggering in - you should be able to see the difference:
  12. 1 point
    Yes. The problem is that my "demo" example works fine with your new code, but using Draggable in my game still doesn't work reliably - sometimes it looks like 1 click is fired and other times it's 2. Rather than trying to chase down this new problem, I'm now trying to get rid of my click handling and replace it with Draggable's. If I run into the 2-click issue again, I'll post here. If I run into some different issue (which is starting to look possible), I'll start a new thread. Thanks for being so responsive; it is appreciated!
  13. 1 point
    Is it something Draggable-related? If you need help, feel free to share more details. But yeah, I think that as long as you're trying to straddle between your own native handlers of click/touch/pointer events and using Draggable (which smooths most of that out), I'd guess you'll have your hands full
  14. 1 point
    @GreenSock It appears that your beta version fixes the issue with my demo. Unfortunately, there's a lingering issue happening at my site. I understand all the issues with different browsers, and you have my sympathy. It's really annoying that there isn't some standard for this behavior. Since you recommend using Draggable.onClick so strongly, I'm going to go back to trying to rework my code to use that. If I can get that to work, it's probably more "future-proof" as well. It doesn't look like it will be easy, but it seems like it should be possible to do that.
  15. 1 point
    Hey chester and welcome to the forums, Thanks for the code that you have provided, but what have you tried to animate the items as you describe using GSAP? What problems have you run into? I think it'd be best for you to provide a minimal example of the issue(s) that you're running into using GSAP in a CodePen like the thread below describes.
  16. 1 point
    Might want to check someone’s history, skill set, and experience before you accuse them of trolling.
  17. 1 point
    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
  18. 1 point
    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.
  19. 1 point
    Particle Animation To create a particle animation, we need to create some display objects for GSAP to work with. Here's what a very basic sprite object might look like. var sprite = { texture: texture, // Image or canvas to render width: texture.naturalWidth || texture.width, height: texture.naturalHeight || texture.height, originX: 0.5, // Transform origin, so 0.5 would be 50% originY: 0.5, alpha: 1, rotation: 0, scale: 1, x: 0, y: 0, }; Now you can animate that object just like you would if it were an HTML or SVG element. TweenMax.to(sprite, 2, { x: 100, y: 200, rotation: 180, scale: 0.5, alpha: 0.2, ease: Sine.easeInOut }); And on every animation frame, you would render the sprite like this. TweenLite.ticker.addEventListener("tick", render); function render() { context.clearRect(0, 0, canvas.width, canvas.height); var offsetX = sprite.originX * sprite.width; var offsetY = sprite.originY * sprite.height; context.save(); context.translate(sprite.x + offsetX, sprite.y + offsetY); context.rotate(sprite.rotation * Math.PI / 180); context.scale(sprite.scale, sprite.scale); context.globalAlpha = sprite.alpha; context.drawImage(sprite.texture, -offsetX, -offsetY); context.restore(); }