Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 05/24/2019 in all areas

  1. You can't animate something that has !important. You're going to have to figure out a fix so you're not targeting something with !important. I just wouldn't use Bootstrap. You need to animate the width or scaleX of something like div or svg. Example animating a div from the center. Close enough. https://codepen.io/osublake/pen/rQwwjj
    4 points
  2. This was actually quite interesting. I noticed that in @swampthang's first demo, it always broke on the 21st time I hit "next" which corresponded to exactly 0.7 seconds into the timeline. Hmm... The way GSAP distributes the animations in the staggerTo() is by figuring out the total amount of time to distribute among the staggers (in this case it's the individual "stagger" amount, 1 / 30, multiplied by 76 because you've got 77 elements and the first one starts at 0, so there are 76 staggers...thus the total amount is 76 * 0.03333333333 = 2.5333333333333), then distributes that accordingly. Thus the math for the 21st one would look like: 2.5333333333333333 * (21 / 76); //0.7000000000000001 Kinda weird, right? Technically it should be 0.7 but due to the way floating point math works in computers, it's 0.7000000000000001. So if we have a tween placed at a time of 0.7000000000000001 and you put the playhead at 0.7, it's BEFORE that tween, hence the visibility doesn't get set to "visible". Your staggers that control setting visibility to "hidden" were offset by a whole frame, thus the rounding for those hits one set later, therefore you get these TINY slivers of time (like literally 0.0000000000001, and only in very particular/rare cases) where there's a gap. I wouldn't call it a "bug" in GSAP, but an interesting anomaly in extremely rare cases like this. I think I can work around it by doing some rounding under the hood for all the values. Here's a preview of the next release (uncompressed) that has the rounding in place: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js If you had chosen a different value for your "frame" that doesn't trip the floating point issues, like 1/32 instead of 1/30, you wouldn't see any of this. Does that make any sense?
    4 points
  3. That's for a VERY important reason. Ignoring mobile devices, which is another can of worms, most Windows laptops and Chromebooks have touch screens. How do you scroll using a touch screen? You can't.
    3 points
  4. Ah, I was using my touchpad to scroll which works fine. After plugging in my mouse and scrolling with the wheel I understand what you're getting at. The trick then is to keep track of how much distance was not reached by the time the subsequent scroll events happen. I added a couple variables to keep track of it. I also fixed the issue where people scroll above the default position (but not past the last one). Let me know if you have any questions! https://jsfiddle.net/Zeaklous/5v8eywmb/5/ P.S. I just noticed that this breaks when I use my touchpad and doesn't work at all with my touchscreen (neither does your original demo). You might want to handle them independently.
    3 points
  5. Hello and welcome to the GSAP forums, I am not noticing anything jerky about your demo. Can you provide more detail as to what you mean by that? I do notice that your page lets you scroll past the top There's a simpler way to do smooth scrolling exemplified by Blake in this post:
    3 points
  6. Hi @waschbaer__, Your construction is very complex. It is therefore not easy to find the cause. I suspect it's related to fromTo and immediateRender ... (?) With a variety of slides, individual animations per slide is my approach clean dom, proper semantic Building scene for scene with an individual timeline in which I have everything in view: timing, positioning, easing ... https://codepen.io/mikeK/pen/RmMaZJ Grüße aus Hamburg Mikel
    3 points
  7. Yeah, pretty much. You could even just tap into classList.add() and classList.remove() methods. https://developer.mozilla.org/en-US/docs/Web/API/Element/classList Good luck!
    3 points
  8. I've been getting a bunch of people asking me about how to do a smooth page scroll effect, so here it is. Scrolling is just a transform. If you scroll 100px down, the browser will translate the page -100px up. We can do that with GSAP. TweenLite.set(contentToScroll, { y: -window.pageYOffset }); So how do you prevent the browser from scrolling the content? Position your content in a fixed container, and set the height of the body equal to the height of your content. This will allow the page to scroll, but the fixed container won't move. Now animate the y position of your content based on the scroll position of the page.
    2 points
  9. I haven't used hooks but I think that useRef is what you need. It's like using this on a class.
    2 points
  10. Hello @waschbaer__ and Welcome to the GreenSock Forum! Keep in mind that anytime you use any type of from() tween, that the immediateRender special property is defaulted to true. So you will need to add immediateRender: false if you see that visible before the animation triggers. immediateRender: Boolean - Normally when you create a tween, it begins rendering on the very next frame (update cycle) unless you specify a delay. However, if you prefer to force the tween to render immediately when it is created, setimmediateRender to true. Or to prevent a from() from rendering immediately, set immediateRender to false. By default, from() tweens set immediateRender to true. That goes for all from tweens from() fromTo() staggerFrom() staggerFromTo() Since your animating opacity (autoAlpha), you can also add visibility: hidden to your elements css so also dont have your item visible on load. The autoAlpha special property will automatically toggle visibility property to visible before animating opacity to 1. Resources: fromTo(): https://greensock.com/docs/TweenMax/static.fromTo() CSSPlugin autoAlpha: https://greensock.com/docs/Plugins/CSSPlugin#autoAlpha Happy Tweening
    2 points
  11. Makes complete sense. I went ahead and changed the app to use a sequence of show/hide set pairs and it's working great. Thanks for the beta link, the thorough explanation of what's going on here and once again - for an awesome library!
    2 points
  12. Hi @H0BB5, If you draw two wave circles, correspondingly offset and morph, it can look like (like 'inverting the wave') this: https://codepen.io/mikeK/pen/dEdQzE Happy morphing ... Mikel
    2 points
  13. Nah, you don't need MorphSVGPlugin unless you're actually morphing something or if you need to convert an existing <path> into motion path data for BezierPlugin. But you're just animating in a circular shape which is totally possible without a motion path at all - you could just use transformOrigin and rotation.
    2 points
  14. Hey waschbaer__ and welcome to the forums! I'm not sure exactly what type of effect you're looking to get, but you have an extra section at the top that is throwing off the timings in this demo. Removing it seems to fix the issue in the demo you provided: https://codepen.io/ZachSaucier/pen/vwdMwe?editors=1000 Besides that, I'd be careful nesting general selectors like you're doing (such as $('.textfade_Slide1').each()) inside of other general selectors. If you have anything with the class textfade_Slide1 in multiple sections you could face some weird issues. If you're reusing animations, it might be better to scope the selector by doing something like $(self).find('.textfade_Slide1').each(
    2 points
  15. OSUBlake is right regarding setTimeout. Take a look at the last codepen i posted above and see if that might help. It's proving to be much more reliable.
    2 points
  16. Using setTimeout will cause issues, especially if you leave the page and go do other work on your computer.
    2 points
  17. What's wrong with using classes? Try searching React docs, like useRef. https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables
    1 point
  18. I removed Bootstrap's "bg-light" class and now animating background color works. That class seemed to override any background-color values.
    1 point
  19. In addition to the error that PointC points out, you could also remove the need for the second .to() statement if you use Timelinemax's yoyo parameter: let cloudOne = new TimelineMax({repeat:-1, yoyo:true}); cloudOne.to( "#Cloud-1", 9, {transform:"translateX(94vw)"}); You might want to also change the yoyoEase parameter as well.
    1 point
  20. I'm not quite sure what should be happening here, but the cloud isn't moving because you have a lowercase 'c' on your tween target. // switch this cloudOne.to( "#cloud-1", 9, {transform:"translateX(94vw)"} ) cloudOne.to( "#cloud-1", 9, {transform:"translateX(0vw)"} ) // to this cloudOne.to( "#Cloud-1", 9, {transform:"translateX(94vw)"} ) cloudOne.to( "#Cloud-1", 9, {transform:"translateX(0vw)"} ) Does that help? Happy tweening.
    1 point
  21. Gotta be honest — I thought that sentence was gonna end with "we don't allow CSS animations around here." ? Since Zach has a shiny new GreeenSock Admin badge, it's probably time to dust off the chalkboard.
    1 point
  22. Anybody else see flickering? I seriously doubt this related to GSAP. Most likely a browser rendering issue. I bet you wouldn't see any problems using canvas. https://codepen.io/osublake/pen/vpEQzY
    1 point
  23. Hi @Lanceken, Welcome to the GreenSock Forums. I like your work. Here only as a stimulus a dynamic version. However, the fake behind which the missile might disappear is very complicated with a specific motive that is spinning. https://codepen.io/mikeK/pen/gyYWEe Happy tweening ... Mikel
    1 point
  24. Hey Iamattamai, This seems like it's an issue with the images loading to me, not an issue with GSAP. I'd recommend using a sprite sheet as Blake suggested. If you can't do that from some reason it might help to make sure the images have loaded.
    1 point
  25. Have you tried not using base64? I would recommend using a sprite sheet for something like that.
    1 point
  26. Well I was creating a sample an Jack beat me to it. Also a piece on friendly advice. Try to avoid updating the state of any component on events that are triggered a lot like mouse move or scroll. It could create quite a burden in the app since that component re-renders and so it will any child component in it even if they don't re-render because of the state update, Reat still will look and do a shallow comparison to see if something has to be updated. If possible try to set up an event emitter and store the mouse position outside the class, remember that you're working with ES6 modules, which means that you can export the event emitter from the main file (or other file if you want), create the event listener in the new cursor file and emit the event in the parent component, that will be far cheaper in terms of processing than updating the state on every mouse move. If you take a look at this scroll spy library, you'll see that the guy does and stores all the calculations in an object and then compares those values with the ones stored. Once the scroll value exceeds the value of one of those items the state is updated only once: https://github.com/makotot/react-scrollspy/blob/master/src/js/lib/scrollspy.js#L191-L201 Happy Tweening!!!
    1 point
  27. Also, for the record, I'd recommend avoiding className tweens because those require looking at literally every...single...CSS property to find anything that has changed between the old and new className, and then tweens each one. It's much better to just specify the properties you want to animate. If all you're doing is swapping classes, it's probably simpler to just use a CSS transition. Oh, and there is one case where an image's src must get updated internally, and that's for backgroundPosition because it has to measure the width/height of the native image so that it can accurately handle things like percentages. As far as I know, it's impossible to do otherwise. I found the original email notification about this thread and it contained a link to a valid codepen, so I peeked at that and it does indeed look like you've got a backgroundPosition in play there, and it's percentage-based. Perhaps that explains things.
    1 point
  28. Did someone say like a ferris wheel? I had this laying around from 4 years ago. Great stuff, Craig and Blake!
    1 point
  29. I'll show how to do parallax later. I want to see if I can optimize it using the Intersection Observer API being discussed here.
    1 point
  30. Me too! Haha! Love it! I would probably use .map(). Whatever you return gets added to a new array. const ar = Array.from(document.querySelectorAll(".content")); const animations = ar.map(el => { observer.observe(el); return new TimelineMax({paused:true}); }); As a one-liner. const animations = ar.map(el => (observer.observe(el), new TimelineMax({paused:true}))); If you have multiple things in parentheses, it will evaluate to the last one. const num = (1,2,5); // => 5 Can be handy for conditional statements. // Restarts animation and sets value to 10 if animation isn't active const value = animation.isActive() ? 5 : (animation.restart(), 10);
    1 point
  31. Hehe. I just sent him message at the same time you posted that.
    1 point
×
×
  • Create New...