tailbreezy
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by tailbreezy
-
I think this should solve your issue, apart from the fact that is still incorrect. You probably have some other issue as well, it is hard to tell without a live minimal demo. Try to recreate your problem in Codepen and see if it still persists.
-
You can rewind your progress to 0, gsap.killTweensOf( target ) and recreate your animation. window.onresize = () => { timeline.progress(0) // go back to before the timeline progress has moved gsap.killTweensOf( '.target' ) // kill ongoing tweens // re-init your animation // if you initially have a function that sets up your timeline, you can just called it here }
-
Creating smooth scaling with scrolltrigger
tailbreezy replied to Giuliano Maria Lodi's topic in GSAP
Hello there, This issue probably has to do with your anchors placement or having too short of end value in scrollTrigger. https://codepen.io/dadacoded/pen/72901772ab1a6bc88593420b9d704353?editors=1010 -
Hello there, I am not sure what could be the problem, it is hard without seeing a minimal demo or live version. There is one typo though: ease: "power1. inOut", It should be without the extra space.
-
You can also check this similar concept. https://www.sarasoueidan.com/tools/circulus/
-
Hello, Working with complex scenes will only hinder your progress. Try reading the docs and make demos as simple as possible. Here is a scrub animation of a h1. https://codepen.io/dadacoded/pen/d4175e5d760c18257e66452aa4f3dfff?editors=1010
-
Hello, https://css-tricks.com/almanac/properties/i/inset/ My guess is your are pinning something. Don't worry about it, it just have some default values that will have no visible effect for you.
-
Hello, It is working, though you animation is already completed when you get to see it. Also check your console from time to time, you have several errors that currently aren't affecting much, but could bite you later. You might have to read up on setting up ScrollTrigger. https://greensock.com/docs/v3/Plugins/ScrollTrigger
-
Width and height check in ScrollTrigger.matchMedia()
tailbreezy replied to Patrick Rijkee's topic in GSAP
Hello, It uses the css @media syntax: "(min-width: 800px) and (min-height: 800px)": function() {} -
I did try all of those options, but none seemed to work. Possibly Mozilla broke it again on later releases. https://codepen.io/dadacoded/pen/fef612ff41dd7328230dc1f746a37e62
-
Hello, It is hard to tell without a demo, but have you tried to adding your scrollTrigger on nextTick().
-
Hello, You can use one of gsap utilities. let flower = gsap.utils.toArray(".flower"); let shuffled = gsap.utils.shuffle(flower) ... shuffled.forEach(item => { let stempath = item.querySelector(".stem"); ...
-
Hello, By the way this effect utilizing the transform scale and transformOrigin results in a blurry mess in firefox. (gets worse the more you scale) So not really a great solution after all, scaling the fontSize works proper but is more difficult to adjust.
-
Hello there, I am not sure there is a way to specify custom regEx, which would have been fantastic. In the meantime you can just wrap it in <span></span>
-
I actually don't see much benefit in using display: unset. What are the possible performance gains in using it like this instead of just specifying block, static, hidden, etc. I haven't been around for long, but this is the first time I have seen it used (not a fan, seems to me it hinders code readability)
-
Hello there, Try if anticipatePin will help you, even though it sounds you are experiencing the reverse Also debugging your code from the actual webpage is harder than doing so from a minimal demo. Additionally in the process of creating a minimal demo, most often people figure things out by themselves. https://greensock.com/docs/v3/Plugins/ScrollTrigger
-
Hello there, Please use the fork button in Codepen when fixing/updating your issues, so that there is history of the problems you had in order to benefit others seeing this in the future.
-
Could be the DOM load time as Zach suggested. From the screenshot it seems to me that the DOM loads at around 1000ms. Can be verified by checking on bottom of Network tab in Chrome. Fast ( your preloader will start at 1.08 and it will run its course to 3.55s) Slow ( sorry haven't waited to finish but same applies)
-
There is a variable named top which interferes with DOM top.
-
So if you are not adding draggable.js, there is no problem? Also a screen recording will be better than a screenshot in these cases.
-
@Robin-Hoodie I am not support actually, just a regular member who is procrastinating real-work. I have added the part about alignOrigin right after my last comment, it seems you missed it. Other than that it is always better to figure out things on your own, so thumbs up.
-
I am still not convinced you need separate scroller. Also I don't own android devices, so cannot check.
-
Hello, This may sound a little silly but where have you put your ./gsap-bonus.tgz file, it seems it is not in the folder you are running npm install from.
- 1 reply
-
- 2
-
-
Hello, Any particular reason for using scroller other than viewport/window? In this situation this is causing you trouble, it would require a bit different setup. Also try to set your transforms in gsap instead of css. https://codepen.io/dadacoded/pen/f9d136c338ad2db77c1c2b5194584ee1
-
ScrollTrigger pinned sections with children ScrollTrigger's
tailbreezy replied to Slava Mak's topic in GSAP
Paul's response is quite awesome.
