RobbieC

Nope it didn't. That's the kind of feedback I like. Your tips cleared a lot of things up for me. Thank you!

That is exactly what I was going for. I let my thinking over complicate things. The last few months have been really hard for me trying to relearn things. I really need to take Carl's course.

Dang I thought I had something here. Well at least it works for someone that is doing a horizontal page layout. But it is possible to achieve the same animation but for a vertical scrolling page with a horizontal pin section? I just have to change my logic/calculations for the trigger, start & end on the "tl2" timeline?

You are correct, there is no difference. Its a window resize issue. Can you help me??? To create the issue please open the codepen in "editor view", play the animation till you get to the bottom of page (like below image). Now slide the codepen divider bar that splits the code from the visual content, up (Like below image). You will notice that the last image is gone. So it leads me to believe that I need to add a refresh event (which I need help with).

@ZachSaucier So I changed: .forEach(function(elem) { to: .forEach(elem => { And I actually got a more accurate animation on the ".secondAn" images, they seem to all visually start in the same location (Which is what i want). But when I had it with function, the starting point seemed to change for each image. Can you help me understand the main difference in using function vs arrow, I have tried to do some research but its still a little unclear to me.

Hey guys, I just wanted to share my version of a similar codepen that I had built when ScrollTrigger was in beta but after coming across this thread I actually made some tweaks. So here is my updated codepen: https://codepen.io/robbiecren07/pen/303006b755b44294fd10efcaaeb8068e Right now it works as planned in Codepen @ZachSaucier maybe you could do a quick quality check on my gsap code?? ? I did come across an issue when I took my code and placed it in another project on my localhost, the padding & height in the "pin-spacer" are not populating correctly. The project I placed it in has a bunch of timelines, scrolltriggers and another scrolltrigger pin section. So its going to take me some time to create a Codepen to recreate the issue.

See what I've missed while I was away!! The video literally stole the words out of my mouth, "Using a regular mouse can be choppy, that's why some people like to use smooth scroll."

Did you manually set it to enabled? But yes what your saying does make sense. After I did a little more testing last night I came to realize that part of the jumping was caused by my actual mouse wheel, after testing it with my old mouse and laptop mouse, my new mouse's wheel has a longer roll per finger movement (I hope that makes sense). Just kind of sucks cause I didn't realize how much someone's settings/mouse could affect there viewing experience with scroll based animation. BUT if Chrome has there Smooth Scrolling feature set to enabled by default when someone installs Chrome for the first time, then this would not be an issue. Like with Firefox, its default set to use their build-in smooth scrolling.

Hi everyone, I've been AFK for awhile but I'm kind of back ?! This question is not directly related to GSAP but it's something I just came across and wanted to see if anyone else has ran into the same issue and what solution if any you used. I didn't noticed this until I did a few things; I got a new mouse, hard drive and installed a fresh copy of windows 10 & Chrome. I opened my localhost on chrome and started scrolling with the mouse wheel and noticed that all my ScrollTrigger animations were super jumpy. I checked all my mouse settings, driver, etc and that didn't fix it. I do realize that the physical mouse wheel on some mouses move differently, so that's a little part of the issue. The main issue I found was that in Google Chrome there is a feature called "Smooth Scrolling" you can find it at: chrome://flags/#smooth-scrolling Mine was set to "default", I changed it to enabled and went back to my locahost and the jumping went away and the scrolling was smooth!! I don't know if I had this featured enabled before on my old hard drive, so I'm not 100% sure if the issue was Chrome or if it was my new mouse or a combination of both. My question to you guys is; do you have the feature enabled in Chrome? If so, what do you do if a user/viewer does not have it enabled and the scroll animations are jumpy for them. In the end, we all want the user to have the same viewing experience as the developer has when he builds something and if something like a feature in Google Chrome or even a curtain type of mouse can alter that viewing experience, what are the solutions (if any) so that everyone has the same viewing experience with the animations?

So I kept tweaking the code a little bit on my original codepen and I decided to wrap it in a "gsap.utils.toArray" so that I can use it in multiple places. I want to post it here in cause anyone else needs it. Here is what I came up with. gsap.utils.toArray(".split").forEach(function(elem) { const splitTimeline = gsap.timeline({scrollTrigger: { trigger: elem, start: "top 80%", end: "bottom 10%", onToggle: self => gsap.to(elem, {opacity: self.isActive ? 1 : 0}), toggleActions: "restart pause restart none", markers: true } }); const splitTitle = new SplitText(elem); splitTimeline.from(splitTitle.chars, {duration: 1.5, opacity: 0, y: 100, stagger: {amount: 1}, ease: "back.out(1)", overwrite: "auto"}); });

That looks prefect, thanks! I think your right, I thought there was a reason why I didn't use spans in the past. My memory has gone down hill over the past year, I have had to relearn some pretty basic things - kind of frustrating.

I agree @mikel Also should splittext be able to function correctly if used inside a span tag? I edited my above codepen and placed it inside a span and if you notice the toggleActions do not work correctly. I only added the span because that is how I actually had it on my localhost before I made the original codepen for this post. https://codepen.io/robbiecren07/pen/JjYwVGm

YES! I figured that was the order of the toggleActions after I sent my last reply but I couldn't find anything under the scrollTrigger Docs that actually says thats what the order is.

Yes! That makes sense and it actually looks better using the pause/resume instead of playing the animation again on "scroller-end & trigger end" when scroll back up I think that's the "onEnterBack" property right?. But what if I wanted it to play the animation again on "onEnterBack"?

If I use "toggleActions" is there a way to set a duration for "reset"? I tried adding a default duration to the timeline and that didn't work. I have also tried just using "onLeave, onEnterBack and onLeaveBack" like this: onEnter: splitText, onLeave: function() { gsap.fromTo(".split-text", {autoAlpha: 1}, {duration: 0.5, autoAlpha: 0}); }, onEnterBack: splitText, onLeaveBack: function() { gsap.fromTo(".split-text", {autoAlpha: 1}, {duration: 0.5, autoAlpha: 0}); } But that didn't work and I have a feelings its because i'm building the splittext outside the timeline. Not sure what the best solution is. My end goal is to play the animation on "onEnter and onEnterBack" and do fade out for "onLeave and onLeaveBack".

So I cleaned up the SVG a little on the original pen and then I created a new pen to show how I'm doing my transition out, you can view it here: https://codepen.io/robbiecren07/pen/QWjZqrW So on that pen, I lock the scrollbar so that the user can't scroll the page while the intro is playing and then it fades out the intro and fades in the rest of the page. Not sure if this is the best way, but it works for right now. What do you guys think? Also I noticed that on my original codepen i'm using DevTools and there is a .5 sec delay in this tl: tl.from(".svg-intro", {autoAlpha: 0, ease: "none",}) So when you press play at the start of the animation there is a .5 sec delay before the stroke animation starts but when I moved my code into my project the delay is not there anymore. I'm not using DevTools inside my project, which leads me to believe that DevTools is maybe what caused the delay? I can replace the above code to this: tl.from(".svg-intro", {duration: 0, autoAlpha: 0, ease: "none",}) Then the .5 sec delay is gone and the drawSVG stroke starts immediately.

So I want to start with, thank you guys for your comments/feedback it really is helpful. I will admit I should have waited to make the post till I did do some clean up. I was just so stoked that I actually created something that works, I was just in a hurry to share it! That being said, I created this in codepen first then I moved into my project and from there I had started to clean it up and make some tweaks. I should have waited and brought the finished code over into the codepen then posted it. @ZachSaucier was right though, my html code was messy. I might not have gone back and removed some of the unused IDs if he didn't give me that feedback. You also said: I just made that change in the codepen cause it does make it easier to understand. But for me personally maybe its cause im new to GSAP and it makes it easy for me to understand and read if I keep it all on one line like so: .fromTo(".stroke", {drawSVG: "50% 50%"}, {duration: 1.5, drawSVG: "0% 100%", stagger: {amount: 1}, ease: "circ.Out"}) But if I post that in Codepen it looks ugly and actually makes it harder to read. @PointC Your reply was literally on POINT! I'm a huge fan of your SVG animations and they have helped me alot, so thank you. I was actually planning on going back into Illustrator this weekend and making some small tweaks to the SVG, so that the code will be smaller (i.e. the stroke outline of the R, you can see it overlap the C, before the fill starts and once I saw it, its been bugging me ever since). Adding the comments is smart, specially since I want my codepen to be able to help someone else. Comments on for the project side I guess I keep telling myself "it's just going to get minified, whats the point" - but that doesn't mean I cant leave the comments in the original source file, so that's something I need to work on doing. As for your #4, I would say I'm pretty good at keeping my HTML/CSS tiddy, my JS on the other hand not so much and I think that's more so cause I'm still learning JS and keeping some strings in a single line is easier for me to read/understand and then that minify thought creeps back into my head! I made some of the above changes to the codepen already, I'll finish the rest it up tomorrow so that its cleaner/easier for the next person to read. I will probably make a separate codepen that will have the intro animation plus the transition out, but ill post the codepen link in this post. Thanks again everyone!

You're right, I should of done a once over. When I get back to the computer tonight I'm going to clean/correct it. Plus im going to add the transition out of the "intro" to the "page". On my project this is a fixed full screen intro, which fades out and then fades in the page/content and locks the scrollbar during the intro so they cant scroll down and actually see the page content. I'll explain that a little more once add it to the codepen.

Which IDs? Like “.logo-outline” - I just did that for me. The IDs in the JS are for the DevTools, which this is the first time I’ve used the DevTools.

?‍♂️ How did I miss that! It’s right there in plain English on the GSAP v3 migration docs! When you say stylistic, you mean the indents and spacing? If so that’s just case I typed it in the regular editor view and let codepen control the tabs.

I wanted to post this animation I created last night for two reason. First to help anyone else out there that are trying to create any type of SVG logo animation. I did a lot of searching in the forums for DrawSVG, animate svg fill, etc. So I just wanted to add a little to help anyone out in the future. Second, I wanna get some feedback from you guys since I am new and maybe could optimize my code better or something. Hope you guys like it and it helps at least one person out in the future!

Your a lucky man! My code is 100% ALWAYS the issue! I guess the reason I said Google Dev tools is because before I started using GSAP I would use Dev tools to see the "timeline" of the animations and be able to fine tune them and have a visual timeline of when they are playing, order, etc. I'm actually reading the docs for GSDevTools right now, we will see what happens - It looks like a fun tool. I put my project on the back burners right now since i'm going to do away with ScrollMagic once you guys release your new tool and re-code everything accordingly. Which will most likely cut my js file in half, I have this feeling that i'm not coding my timelines/scrollmagic correctly.

That’s the best news ever!! I’m so excited, someone else had mentioned something was in the works on a different post I posted last week. I love your guys work, so I have no doubt it’s going to be an amazing tool! As soon as you guys release it I’m going to rewrite my entire personal project!

Sorry I should of been more specific, yes Google Dev tools. I totally forgot about the GSDevtool, that looks awesome I’ll try it out tomorrow. I do have some of my GSAP animations triggered with ScrollMagic, will I still be able to use GSDevTools correctly?

I did some searching online before deciding to post the question here (had no luck searching). My question is; is there anyway to Google Inspect JS based animations? I've used Google inspect animation before in the past for CSS animations but when I tried to use it last night it seems its doesn't record the animation. I'm guessing because its a JS based animation. Can anyone shed some light on this? I guess this would lead me into my next question, What do you guys use for debugging on your projects?