Jump to content

All Activity

This stream auto-updates     

  1. Past hour
  2. 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
  3. Today
  4. 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
  5. 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.
  6. Hi, Thanks for all the helpful information so far. Some remarks: 1/ Must be responsive 2/ @ZachSaucier The rocket will follow the path around the earth after a click action (not only CSS) 3/ I prefer to use the free version, the MorphSVGPlugin is not free (I understand why) 4/ @GreenSock I understand that you need the MorphSVGPlugin if you combine both in one SVG file right? Let me first check your CodePen example.
  7. Hello. I'm trying to do my scroll animation. I've had such a problem that when I scroll more than once, the animation is jerky. How do I make sure that when I scroll more than once, the animation is simply extended to a distance equal to the number of times I scroll? I have this now: https://jsfiddle.net/drkrol/mtvhrdgb/8/ I aspire to this: http://maxlepinskih.com/prices
  8. 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?
  9. 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!
  10. Yesterday
  11. I don't have the chops to make my own plugin unfortunately but it's good to know that is an option. I realize the post is a bit dated, but something like this (generally speaking)? I will begin to dig into callbacks for the time being, Thanks again!
  12. I don't notice any glitches, but maybe my machine is too fast. As for changing classes, you could use a callback to do something like that (in the callback, you'd apply the class yourself using vanilla javascript or jQuery or whatever). It'd be super simple to do if you only need to go forward, but if you need it to work in reverse as well, it's just a bit more tricky. Another option is to create your own plugin to do this sort of thing (a little more hassle up front, but then you just load it and you can reuse it as much as you want across all your animations).
  13. Thanks @GreenSock! My apologies for delay in reply, I got pulled down the rabbit hole trying to answer my own questions unsuccessfully. I think I am picking up what you are putting down (to an extent). Now that you mention it I recall reading elsewhere around here about using the className in tweens so thank you for the reminder. It seems I also need to get a better grip on the timeline. That said I was able to copy what you did in my text based preloader pen and it worked. But it doesn't seem to help out with the circle svg preloader as it still pauses on the out animation (https://codepen.io/ionz149/full/BeYOrr). If I comment out the className tweens it is smooth however everything relying on those classes stops working (expected) So I am now wondering what is the preferred way to add/remove classes within a timeline like I am trying to do? I tried looking this up but am a bit more confused than when I started
  14. man, such a silly mistake! thank you for the reply!
  15. i essentially just have one function for a fade in , that gets called multiple times once a scene is in the viewport via $('classname that we are using').each(function(){ problem is that every time we slide to the next slide, the content that gets faded in is shown completly visible and then the animation triggers, making it invisible how it should have been from the beginning and fading it in .
  16. Just because the effect is the same does not mean that they are caused by the same thing. At this point we will need more information about the way you're doing things in order to help any further.
  17. you can see the error in the codepen up top , notice how the second slide containting the same stuff is fully visible and only when the animation triggers, it dissapears to fade in ?
  18. 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.
  19. so sadly it didnt work for our project, i edited the codepen, to pull the animation outside the selector for the slide animation, and added another slide with the same content , the animations dont work at all now, only when the fade is inside the selector for the slide animations but then it shows the same behaviour -.-
  20. so I've seemingly never been able to get TimelineMax/TimelineLite to work. I've always gotten around this by using TweenMax tween's onComplete property to invoke the next tween, but, with the current animation I'm working on, it's necessary to have some of the functionality TimelineMax provides in my animation. What I am trying to is animate the clouds in this scene to move to and from each side of the screen. I am trying to do this with a repeating timeline for each cloud. The JS relevant to this issue can be found in this "passiveCloudAnimation" IIFE function. (function passiveCloudAnimation(){ let numOfClouds = 3; let cloudOne = new TimelineMax(); cloudOne.to( "#cloud-1", 9, {transform:"translateX(94vw)"} ) cloudOne.to( "#cloud-1", 9, {transform:"translateX(0vw)"} ) })(); and so you needn't go searching around too much here are all the relevant css selectors and rules. .cloud { background: #fff; background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #fff), color-stop(100%, #f1f1f1) ); background: -webkit-linear-gradient(top, #fff 5%, #f1f1f1 100%); background: -o-linear-gradient(top, #fff 5%, #f1f1f1 100%); background: -ms-linear-gradient(top, #fff 5%, #f1f1f1 100%); background: linear-gradient(top, #fff 5%, #f1f1f1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#fff", endColorstr="#f1f1f1", GradientType=0 ); -webkit-border-radius: 500px; -moz-border-radius: 500px; border-radius: 500px; /*change box shadow - need to make it thicker*/ top: 40%; height: 54%; position: relative; width: 100%; } .cloud:after, .cloud:before { background: #fff; content: ""; position: absolute; z-index: -1; } .cloud:after { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; /* for left bumpe */ height: 110%; width: 40%; left: 14%; top: -46%; } .cloud, .cloud:before { -webkit-box-shadow: 12px 20px 20px rgba(0, 0, 0, 0.5); -moz-box-shadow: 12px 20px 20px rgba(0, 0, 0, 0.5); box-shadow: 12px 20px 20px rgba(0, 0, 0, 0.5); } .cloud:before { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; /*for right bump*/ width: 48%; height: 150%; right: 11%; top: -75%; } .Cloud-Container { display: block; position: absolute; /*positioning*/ /*keep this ratio*/ height: 5vw; width: 7vw; } #Cloud-1 { top: 12%; /* animation-duration: 18s; */ z-index: 17; } #Cloud-2 { top: 22%; /* animation-duration: 19s; */ z-index: 17; } #Cloud-3 { top: 16%; /* animation-duration: 16s; */ z-index: 17; } The html is pretty self-explanatory. I feel like I'm following the docs exactly as it says, though as I put before I really have never been able to use GSAP Timelines. so I hope you guys can let me know what I've been messing up on all this time. thanks!
  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.
  22. sadly i cannot remove the sections cause they all contain different animations , i have just blanked the section before this one out for you guys to better see it , otherwhise you would have to scroll alot to get to the example im gonna try the option of scoping like you said , and see if that helps ps: the sections do pin for a duration in wich animations tied to scrolling appear, and then unpin to slide up the next section, that why there is a blank section ontop, i just removed the content otherwhise it would be to much code to debug the error omg i just tested the approach doin $(self).find('.textfade_Slide1').each( for reusing the animations and it actually seems to work now ( atleast on my codepen ) thank you very much im gonna still have to try it on our project but i have a feeling that was it
  23. 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(
  24. well, i have already searched about this issue and found some solutions that worked for others, like givingthe div that is visible before the animation kicks in, a visibility: hidden, and then using autoalpha in the animation, but that for some reason dosent work .. i cant figure out why the text is show before the animation kicks in .. giving it a opacity of 0 in the css also dosent work .. maybe some one here can figure out how to fix this, ps: our project consists of multiple slides like this with different animations and fade ins that are triggered , and every single animation that fades or moves behaves that way -.-
  25. 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.
  26. Using setTimeout will cause issues, especially if you leave the page and go do other work on your computer.
  27. This seems to be working better... https://codepen.io/swampthang/pen/WBMWwM?editors=1010
  28. Here's what I've learned in the past hour as regards my own experience... I moved from stagger to straight JS as stated - flicker completely gone in Chrome and Edge on dev computer. Moved to less powerful, smaller RAM work computer, all good. Now I go do some miscellaneous work on work computer. Return to app and run it again and flicker - here's my guess: - I am loading a large cache of images into RAM - That is all fine and good while the app remains the active page - Start doing some other work and the OS takes cache back - perhaps pushes some of that to disk. - Return to app and some images need to reload causing momentary flicker in doing so I will try reloading just prior to triggering a replay and see if that fixes it.
  1. Load more activity
  • Newsletter

    Want to keep up to date with all our latest news and information?

    Sign Up