kohlej
Members-
Posts
33 -
Joined
-
Last visited
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by kohlej
-
Thanks Zach, this is exactly what I needed. You're very welcome for the demo, the effort you guys put to help users on this platform is incredible, I'm pretty sure that greensock's forum is most "efficient" in giving solutions and most active forum on the internet, and that is thanks to you and few more people here!
-
Hello guys, I have two div: .box which is parent and .roller which is child. .box has width of 50% while .roller has fixed width which is suppose to be bigger than .box. As I scroll, I want the .roller to move to the left inside the .box and at the end point of trigger, .roller's right side should side with .box right side. I got this working perfectly fine with my codepen example Demo 1, but I want it to work on resize. I tried using resize function but I dont know how to pass value... I also tried to look into function-based values but couldnt find anything that would help me... Any help is appreciated; Demo 1 (Working example without resize) https://codepen.io/kohlej/pen/GRNKjWe Demo 2 (Not working example, trying to use resize function)
-
Yup exactly this. I went thru docs but obviously missed this part, thanks.
-
Ihatetomatoes "Practical GreenSock" Tutorials - Giveaway
kohlej replied to Ihatetomatoes's topic in GSAP
Uh everything. I guess the community on this forum, it's very helpful. But more directly to GSAP itself, probably ScrollTrigger -
I forked LocoScroll demo that from Greensock codepen account. My animation with most usual gsap.to tween works just fine on .rotate-box, however .skew-box which has new instance of ScrollTrigger doesn't work, even tho I gave custom scroller to both. Both animations work if I'm not using locoScroll. Could someone tell me why is this happening and if there is way around it?
-
Basically I wanted to animate text, and instead of having same text appear 3x in DOM, and then placing it behind with position absolute, I found it much more neat to use :after and :before to collect data with content: attr(). I just used boxes for codepen as it's faster to make and easier to understand. I would never think of animating CSS variable. How would I target it tho in quickSetter? What I tried is: EDIT: Update in comment below, I got it to work.
-
Hello all, I used a codepen demo I found here. It skews element on scroll and resets position once you stop. If you check the codepen demo, it works, but only because the target is ".circle", I want target to be ".circle:after". For this I need to use cssRule to select pseudo element, but since the demo is using quickSetter, I'm not sure how to adapt it. Is it possible, if so, could anyone tell me how? PS, I can get wanted result without using pesudo, by using another div with absolute position, but duo to design choices, I have to use pesudo in RL example. Thanks in advance.
-
Hi Zach. Yes I thought of that, but the class gets added and removed randomly, so I couldnt use event listeners like click, mouseover etc...So was wondering if there was any listener that can be added to element to watch for class change. I guess mutation observer will work, but I will have to rethink this whole thing. Thanks!
-
Jones Greensock released their own scroll plugin, ScrollTrigger, check it out. This looks doable with scroltrigger
-
Hi Mike, you want the tween to be played when element enters the viewport both way? You can use toggleActions, everything is explain in their scrollTrigger video. https://greensock.com/docs/v3/Plugins/ScrollTrigger
-
Thanks for info and fast replay, I thought it was me doing something wrong.
-
Hi Zach, I forked Blake's pen, to animate each box, but start and end point markers move with the page, and don't stick to element, do you know why is that? https://codepen.io/artyor/pen/bGEGVZg?editors=0010
-
Hi, I will try to acomplish it with this. Yes Im aware that manipulating height/padding is not the ideal, but it was some unique animation I wanted to create. Thank you
-
Hi guys, here is a demo where I reproduced the problem. Markers of H1 element are off the same amount as the other section element above it changed it's height(padding top and bottom) before it. By markers I also mean the start and end point of actual animation. Any way to avoid this? PS. Thank you for creating this awesome plugin! It's awesome
-
I have two tweens in timeline, and both duration is set to same amount ".35". I want to bottom line animation last as long as duration of text animation, and to start at the same time, so I added "-=.35". This would work as intended in my mind if there wasn't stagger in 1st tween, which adds up on its duration. Now I can do calulation and add custom duration to line tween, but I will have more buttons with different char number, so the 1st tween will never be the same. Is there a way to make 2nd tween as long as 1st tween, regardless of how many elements will be affected by stagger?
-
Well I assume there is still no exact date of release, maybe what is it capable of doing? Can it animate elements on scroll, depending on scroll position, like we can do with ScrollMagic?
-
Hey, Thank you for reply Zach. I think index might not work as the layout is rather complex, but I will try with data attributes.