aki-sol

Hi OSUblake, thanks a lot for your support! I missed that detail. I can see the errors in the codepen but I did not get any errors in my local project ://

Hi, I'm back at it again and need some help understanding what is going wrong. I want my scrollTrigger to only be active on mobile devices. Thus, I created the scrollTrigger animation within a media query. As I understand the documentation my implementation should work but it obviously doesn't ? I'm having trouble understanding where I'm going wrong this time ://

Thanks Cassie! I initially had xPercent at 100 but tried out other values to test. I think the problem here is actually within my project. When I apply the code and set pin: true, the project crashes. I've not found any records of that happening to anyone else. I'll try to figure it out and if not look for a different solution. Thanks a lot for your time!

Hi Cassie, thanks a lot! It is a simple scale after all. In my project the issue ended up being something else. The article was just what I was looking for. I bookmarked it

Hi, I know there are countless demos on horizontal scroll, with and without locomotive scroll. I've gone through many over the last two days and adopted the structure to my code but somehow none of them have worked out for me. My progress after these last two days is not massive but I've been stuck for a long time really can't figure out my next steps ? I've prepared a minimal demo which is hideous but reflects my current status well and hopefully aid in understanding my current pain points. Goal: My goal is to create a horizontal scroll section within the website. The section contains 3 items, which should be visible one at a time ie. take up the whole viewport. I would like the each section to snap to the left edge of the viewport (applied blue border-left to make the snapping point clear) and the snapping to happen with a linear ease. Currently the pinning of the section is working, however when it comes to the snapping, the 2nd Section is always skipped. It always stops at either the 1st or 3rd section. Also, I'm not happy with my solution for the end of the scrollTrigger as it's not really dynamic but any other function that I have tried, just completely broke the pin altogether so I've settled with this for now. For now I decided that I won't be implementing the scroll with the locomotive library becuause a) I thought it might be overkill when I only want to use the horizontal scrolling b) I couldn't get it to work ://. If however, you suggest that would be the better way, I will give it another try.

Hi, I want to implement implement scale3D in a tween. I couldn't find anything regarding that property in the docs, so I just tried it out and came to find out that scale3d and scaleZ are invalid properties in gsap. My goal is to achieve a scale movement like in this demo https://tympanus.net/Development/SmoothScrollingImageEffects/. I looked their code which is quite complex (for me at least) and also not how I would want to implement this. Question 1: What is the best way to recreate scale3d in gsap? Question 2: As far as I understand, it's advised against animating transforms (so in my case styling transform(scale3d) in css and animating in gsap). However, in this case were there is not scale3d property in gsap, would this be a fair case to animate the transform or is it still best to use another solution? Bonus: When researching this topic, I was looking for a css property translation list for gsap tweens (essentially a list declaring how to reference css properties in gsap). Does such a list exist?

Thanks @OSUblake ! It took me some time to find the tweak! I guess before I was targeting all boxes at once the the forEach function and going back to the article now I can see that I should have payed more attention to the comments in the example.

Thanks a lot Cassie! It's a great article and it helped me find some mistakes! In the function that I initially set up I failed to use the identifier from the forEach() as the trigger. As advised by the article I also changed the gsap function from "from" to "fromTo" which helped with the proper timing of the animation starting for each module, even though I must admit I haven't really understood why this is the right solution yet. However, the animation is behaving strangely. I don't understand why the boxes jump back up and down at random times which in some cases also messes up the animation timing for the second container. I thought that setting an explicit end point would fix it but that does not see to be the problem here.

Hello, I'm really excited to get the opportunity to work with gsap! I'm currently having an issue with reusing the same gsap function for multiple elements. My goal is, that each box-container gets triggered individually when they come into the viewport. Currently, the animation function is only applied to the first box-container, which is also the only one that has gotten a scrollTrigger marker applied to it. What I want however, is that each bock-container gets their own markers and is triggered individually. To me, my demo really makes sense but it's obviously not achieving what I need. I would really appreciate if someone could explain to me where I went wrong ^^ Thanks! Edit: I've changed the animations from when I first posted, but I added some comments to the codepen for later viewers that might experience the same problem to see the progression.