Adam.shires

Oh my! lol I feel like a dope hahaha. Amazing how the simplest things can get lost when you've been staring at the screen for soooo long Thanks So much @Rodrigo Legend

Hey Everyone, Been scrathcing my head over this one and simply can't figure out how to implement ScrollTrigger rfresh(); to recalculate % start and end values on screen resize. So in my demo there are two elements which on scroll reduce their widths from 50% - 0% in the left and right direction, Imagine two curtains opening. Upon load, and with screen resize the two curtains both take up 50% of the viewport no problem, but if I resize after engaging the scrollTrigger the intial values of the 50% are remaining and the "curtains" overlap each other. As can be seen when scrolling and then resizing in the demo. I believed this to be a simple fix with ScrollTrigger.refresh(); to recalculate but I feel like I'm missing something super obvious! Sorry for the silly question I've been wracking my head over this one and have been staring at the screen for hours lol ?

@Carl @GreenSock Thanks so much for taking the time to offer some direction, I really appreciate it Will take both of these ideas onbaord and keep trucking away at it. Will update you on any progress I make. Thanks again, LOVE this product so much

Hey everyone, So this has been proving to be trickier than first expected. I've built out a loop, which uses drawSVG (and @Carl's amazing creative club tutorials :)) to create a "Tron" effect, which goes around a button on a client's site. My issue is that I'm trying to use a mask to create a feathered look to the line so that it is faded near the "tail" of the stroke. so far I've got the loop working and looking good, but I can't figure out how I might be able to apply a gradient mask to loop around the path to create the effect. At first I thought I could just use a larger version of the mask, however that wouldn't create the effect I was after and would just result in one end of the whole loop being hidden and the other end visible with some faded opacity in-between. I thought maybe it's possible to animate a gradient <rect> over the path? And then animate the gradient around the path to reveal the stroke underneath Which I think would look like this, but I'm struggling to get it to work: Any ideas? Thanks in advance Adam

Yeah, I figured that animating the container element was throwing off the start/end calcs. Was happy with the array stuff too, however I was struggling to build something which animated the array through the viewport without using the shifting container. The solution I came up with works a treat though Thanks again

Hi @GSAP Helper Thanks for the apology. I'm fairly exhausted too, been a long week building this thing out and this final issue has had me frustrated. Sorry for my curt response. Yeah, I have reengineered the solution to simply use a normal timeline and stagger. And have removed the scrolling container as it was causing all the calculation mishaps. I was hoping to better understand the array structure and wanted to see if I could build something using arrays, but the reengineered solution is cleaner and easier to manipulate. Again sorry for misinterpreting your response

Hi @GSAP Helper Sorry if you got lost, but your tone is a little rude to be honest. I tried my best to explain the issue and wanted to help people understand the issue with enclosed pictures. Don't appreciate being made to feel like a beggar asking for free fixes. I too want to be able to understand the product better and know where I could better amend my design. I don't think responding to peoples honest requests for assistance with such rhetoric is appropriate. The screen shots and demo both show text scaling after hitting 50% of the viewport so not sure why you'd say they have nothing to do with each other. All I want to know is how I can get the text div to use the marker div in the minimal demo as a target while in the array? and yes I am trying to get the text to scale, and a line go through it when it hits the center of the screen.

Hey guys, So I'm building a website for a client at the moment and have been writing a large scrollTrigger animation for the page. Everything is going great, but I can't get my head around one issue. So I've built a section with 700vh to act as a sticky section (not using pin) inside I've got a 100vh container with a number of divs inside, each with text. The container holding the text rolls through the viewport and, what is supposed to happen is; when the text inside the container hits the center of the viewport an animation starts which scales the text, and a strikethrough line crosses it out. So far it's going well and This can be seen in 'image A'. However, when I refresh the page their position in the animation isn't updated to the viewport 'image B'. I realise this is my fault and not scrollTrigger's as I've built the array to target the trigger so the calculations are obviously being made with it's original position in mind rather than the new position. This can be seen in 'image C' where the markers are shown significantly further down than the triggers. But there's also some strange behaviour that if all the trigger elements in the array are on screen, then it has no problem with the refresh, 'image D'. I've included a pen, with a similar build to what I'm working with and was hoping someone could offer some advice on what would be a better solutiuon to build this rolling text effect out. Thanks so much in advance ?

Hey guys, Have been loving learning all about scroll animations and am currently applying a huge amount to a clients website. I've recently managed to amend a number counter - scrollTrigger animation to only go to a single decimal point. But I was wondering how I could add a '0' in front of the single digits before it hits ten? Any help would be greatly appreciated ?

Thanks so much for all the advice @OSUblake and @mvaneijgen I'm going to spend some time playing around with all the solutions you mentioned and will let you know how I go

Hey everyone, This is my first post on the forum and I'm extremely new to this all. My JS is non existent and my HTML and CSS are very basic. I use Webflow to build sites for my little studio and have made it my goal this year to learn HTML, CSS and JS as best I can. Recently I've been trying to implement ScrollTrigger animations into a rebuild of our current website. I've been having some success and everything is running smoothly except in Safari. I'm running Chrome (Version 98.0.4758.81) on Windows 10 64Bit and the animations are smooth and fluid. However, when running it on my Safari (Version 15.3) on my wife's MacBook Pro and iMac the animations are incredibly choppy and laggy. I've noticed that up to a point in the scroll animation it seems to suffer with so much transforming text on the page and really doesn't seem to like the transitions of the autoAlpha until it's finished, then runs smooth again. I've tried to create a Codepen to demonstrate: But here is my staging site: https://bsa-site.webflow.io/ Any advice on getting this to run smoothly on Safari would be greatly appreciated. Much thanks in advance Adam