tallulahh

Hey I am very new to svg and I am trying to do the same thing(reversed) but I can't understand how the #rect is being morphed to with a visibility: hidden, or don't understand where in your code your have dealt with this.

Similarly I have created scrollTriggers like this, adding previously created animations:

Hello! I have been researching into timeline organisation as I have a lot of animation on my current project. I have read that animations should be put into their own functions and then added to the master timeline, cleaning up the code a lot. However my question is specifically about a scrolltrigger animation that I am repeating, as the trigger and the target/selector are different, however the rest of the code stays the same. Any recommendations? gsap.from(".about .char", { scrollTrigger: { trigger: ".about", start: "top-=50 80%", end: "+=100", scrub: 1, toggleActions: "play none reverse reset" }, rotation: 180, transformOrigin: "50% 100%", opacity: 0, duration: 0.5 });

Thanks so much @Shaun Gorneau! I definitely felt like I was repeating too much code but I'm a bit of a beginner, so thanks for fixing it up. However, it has lost one main functionality. Originally, any white outlined text overflowing the frame of the image would be hidden, so the outer edges would have original color whilst the middle would be white. I removed the first timeline animation on ".image-title" and all sorted! Thanks for all the help!!

Hey! I have been playing around with clip-paths and overlays and what I am aiming to do is hover over the word ".image-title" and an image will appear giving the effect that the text only being framed by the image will change to have white outline. (Easier to show than explain..) Actually, I am pretty sure that the timeline is not the issue here, I think it has something to do with the jQuery event triggers. I was hoping someone could help me understand why sometimes the white ouline text appears and why sometimes it doesn't and how I could fix this? It is tricky because i want the image and white outline to appear ontop of the original text, but the original text needs to be listening for the event triggers. Thanks for reading!

I do appreciate that. All i want to know is if the document length is higher the following code is effected $(window).scroll(function() { var scrollTop = $(window).scrollTop(); var docHeight = $(document).height(); var winHeight = $(window).height(); if (scrollTop >= 0) { t1.progress(scrollTop / (docHeight - winHeight)); } });

Hey! Thanks for such a quick reply.. I have just loaded it onto codepen if you could take a look that would be amazing! https://codepen.io/tallulahh/pen/PoqOqqz To clarify, the rotation speed of the ".slide" has become slower - it could be that i need to clarify more values in the gsap code. My intention is for the 3 slides to start rotating onto the screen so that they appear just after the home screen(".hero"), once it has rotated through the 3 slides I want the timeline to stop essentially and the ".gallery-section" to then come on screen. Any advice would be appreciated and thanks in advance!

Hey, a quick question.. in the js file where the $(window).scroll() defines the movement of the scroll.. does the document height then effect the speed at which the slides load? Copying and pasting this code works perfect but I have obviously changed some code around with certain style attributes like position and top distances, and now find that the slide appears slowly(changing the duration in gsap doesn't work). I would appreciate any help!