RobbieC

Oh man I’m so stoked right now! I’m more excited about this than the Valorant game closed beta release! I can’t wait!!

That’s the truth! I learn one thing and something new and better comes out! and that’s the best news I’ve heard all week! That will be awesome! Don’t get me wrong I like scrollmagic but I only use it for trigger animationa and pins. Is there anything on the site that talks about upcoming features and release dates?

@PointC Man your awesome! Sorry about the Scrollmagic script, I had it on my localhost just forgot to put it in the pen. I don't think I ever would have figure out the JS part, thank you for that. I'm still learning JS in my free time.

So I have posted this question on a couple of different forums with no luck, so I'm going to ask it here. Scrollmagic doesn't have a support forum like you guys do. Anyway my issue is that my GSAP splittext is playing on load and not by the scrollmagic trigger that is set. I have tried a few different things with no luck and what has me confused is that I have other scrollmagic scenes with GSAP that work just fine. Any help or guidance would be greatly appreciated!

I'm still a newbie LOL, i'll just edit the SVG!

Thank you! I took me a few minutes to figure out which element to add it to. I put it on the SVG glass and added another TL for the drawSVG starts. It seems to be working, did i do it correctly? Also i'm guessing I need to go back into Illustrator and change the font fill color from black to white or would transparent work better (for the black fill that flickers before the white fill starts)? https://codepen.io/robbiecren07/pen/bGdzdBp

Makes sense, thank you! I did run into a little issue, I placed my codepen code into my project on my localhost and when the page first loads the SVG image is visible for a split second before the drawSVG starts. On my codepen I changed the background color to gray to see if the SVG was visible at the beginning and its not but just right before the white fill starts you can see it fills it black before the white fill starts. The SVG I made in illustrator, the font color is black with a white outline could this be? https://codepen.io/robbiecren07/pen/bGdzdBp

Thank you, that's just what I was looking for! By the way, on my fade out: .fromTo(".loader_wrapper", {autoAlpha: 1}, {autoAlpha: 0, duration: 1}, "fadeslideout+=0.5") is it necessary to add "display:none", to make sure the wrapper stays hidden? .fromTo(".loader_wrapper", {autoAlpha: 1}, {autoAlpha: 0, display: "none", duration: 1}, "fadeslideout+=0.5")

As some of you guys know i'm new to GSAP and today I spent some time and created this SVG logo animation for a loading screen. I'm pretty stoked how it has turned out so far. But I can't figure out if i'm doing it all correctly, mainly the slide down and fade out. I'm trying to get the fade out on the svg to start at the same time as the slide down starts so that by the time the slide down is complete the fade out will be done as well. Any help would be greatly appreciated, specially if im doing it all wrong.

I can try to put together a working demo on codepen later today. Also a side note from MDN: /* CSS3 syntax */ ::before /* CSS2 syntax */ :before CSS3 introduced the ::beforenotation (with two colons) to distinguish pseudo-classes from pseudo-elements. For me when CC3 came out I didn’t sit down and learn all the changes. So I’m not sure when I started using double colons, but I know in the past I created something that only worked with double colons, so I’ll try to dig that up to show you.

Wow this has started a great discussion. I would have never thought to add the position relative like that. My mind is blown away right now, I can’t wait to try it out. As for the pseudo: I’ll have to agree with Zach, I think I have only ever used :: on nav animations. For Blake’s original reply, I think this is great and a great idea to add this in my CSS template. It not only would of saved me the headache with my original issue, it creates less code in my CSS file. Thank you both once again for sharing your knowledge!

So after a good nights rest I woke up this morning and took another look at my code and found the issue was indeed in my CSS. I was missing the position relative on my parent div. .portfolio { position: relative; padding: 0; margin: 0; overflow: hidden; } I want to apologize for prematurely posting this issue and thank you for taking the time to read my post @OSUblake.

Yes that makes sense but on my project this portfolio section is at the bottom of the page and there is a lot of plain text above it and none of that text does the flicker. Also it does it anytime I reload the page in my project environment. The reason why I said to do the hard refresh is cause once you open up into the full screen view your browser will load it from cache. I just added 3 large images above the portfolio section to increase the page load time and I also added some plain text to the spacer section. Now you are correct you don't see the issue - cause your browser is cached. If this was a finished site and someone loaded the site for the first time, they would see the big gray portfolio text flicker. I can see that this is a load issue, but why is that the only text that has a flicker at the start of the page load, I have plenty of other plain text above the portfolio section in my project. So to test that I added a line of text in the spacer section above portfolio and did a hard refresh and still only the word "portfolio" had the flicker. Check out the updated codepen please: https://codepen.io/robbiecren07/pen/NWqedKy So as i'm typing this reply I just did another test and I removed the JS code: console.clear(); var ctrl2 = new ScrollMagic.Controller(); var tlp = new gsap.timeline(); var child = document.querySelector(".portfolio__title"); tlp.to(child, {duration: 1, x: -300, ease: "none"}); var scene2 = new ScrollMagic.Scene({ triggerElement: "#portfolio", triggerHook: "onLeave", duration: "400%" }) .setTween(tlp) .addIndicators({ colorTrigger: "white", colorStart: "white", colorEnd: "white", indent: 10 }) .addTo(ctrl2); Which would remove the parallax effect and the word "portfolio" would basically be plain text and I did a hard refresh and the flicker still happened. I'm thinking now that maybe its something in the CSS? - I'll do a little more digging later tonight.

Afternoon guys! I came across an issue with my current project; so I peace'd together a codepen to recreate this issue to see if anyone could help me out. In order to correctly see the issue you need to view the codepen in full screen mode and do a HARD refresh of the page. As soon as the page starts to load you will see the text "Portfoio" flicker at the top of the page for less than a second and then it will flicker again and appear in its correct position. The text "Portfolio" is being used as my parallax effect which displays behind the placeholder images. I'm using ScrollMagic to pin the section which has horizontal scroll and GSAP to control the parallax. So i'm not sure where the issue is being created if its a GSAP issue in my code or ScrollMagic. I will add that the original GSAP code was from an older version and i tried to convert it to GSAP V3, so there could be an issue with my migration. I have other sections in my site that are using GSAP and ScrollMagic but since I was able to recreate the issue with the code provided in the codepen; I don't think the other sections in my site are causing the issue. Please let me know if I need to provide for information or code.

I just want to weight in and let @ZachSaucier know that his cursor suggestion was the answer to my cursor issue! I was original using a custom circle cursor that was built with jQuery and a older version of GSAP. It would get stuck on the page when you would use the mousewheel to scroll the page, so the mouse cursor would stay in its position but the circle would move with the page as you scroll with the mousewheel. After a little searching I found this post and switched my cursor to the GSAP 3 quickSetter and it not only solved my issue, but the performance improved and its built with GSAP 3 so its inline with the rest of my GSAP code. Thank you @ZachSaucier and @OSUblake for the code & codepen!

I just want to thank you both for taking the time and replying. Have a great day. Stay safe and healthy!

Thank you @ZachSaucier for your reply and feedback. I placed the intro into the codepen because I give the best example of my project. When I started this project my plan was to do all the animations with CSS and a little jQuery; but as the client asked for more moving parts, I decided it was best to look into learning GSAP not only for the different functions & animations but for the speed and smoothness. When I first started my project I was using CSS for animations and jQuery to control the reveal animation on scroll, but I noticed how glitchy the animations were on a older/slower computer. So i did some research and testing and found GSAP and right away I could see the improvement. So right now my project is all over the place. I have very little experience with JS but now that I can see what all GSAP can do im ready to evolve my skills and start learning GSAP. So i've been spending alot of time in your guys learning center and reading tutorials and guides to learn GSAP. My plan is to start over and just use GSAP and maybe ScrollMagic (which I know you dislike). During that process I will have to convert my current tweens to GSAP v3 - which I will use the Mirgation guide that you guys provided.

Sorry for the confusion Zach. The 2nd codepen is my example for the issue im having. The 1st codepen is the source from where I found the smooth scroll function. And my question/issue is on the 2nd codepen; you will see that the body keeps going beyond the ending container. The div.viewport has a height of 2280px, and the body style height is 2280px, yet the body is alot longer which you can see by having the body background color as red. You shouldnt be able to scroll to the red, the body should be ending at the end of the closing div.spacer I hope this makes sense.

So I built a small codepen, I'm trying to figure out why the body height is so long. If you look at the pen you will see that body background color is red, and it continues past the ending content. With chrome inspect is says the body is "height: 973px;" and if you look at the viewport div, it has the same height, yet the body continues. But the smooth scroll effect im looking for works with Blake's scrollmagic parallax on scroll, I just used the smoothscroll part.Scrollmagic parallax on scroll.Please help. @ZachSaucier @OSUblake https://codepen.io/robbiecren07/pen/ZEGodmR

So i'm new to GSAP, I just started using it two weeks ago. I've spent a lot of that time reading through the forums and documents. I'm looking to add easing to my page scrolling. Kind of like what @OSUblake posted here: But i'm trying to apply it to the entire site, without having to have it in a fixed container with a set height. I've tried it and I didn't have any luck with what my end goal is with my project (I have way to many moving parts). The best way to explain/show you guys what im trying to achieve is using this site as an example: https://www.reformcollective.com/ It looks like they are using tween and possibly something like scrollmagic, but I cant figure out how they were able to add the smooth page scrolling "easing". It looks like they were able to do it with out "scroll hijacking" or having a negative user experience. If you scroll their entire site, when you get to the 2nd section they have it stop scrolling Y and start scrolling X, but they are able to keep the same smooth scroll effect as your continuously scrolling with the mousewheel and all the transitions are smooth. My project is very similar to their site. I'm using TimelineMax with ScrollMagic to create different animations and pins, like on this demo you guys provided and like on the above site I talked about. If I need to create a codepen I can, it will just take sometime to build. I'm creating this project for a private client so I cant breach the confidentiality agreement I have with them. Any help or suggestions would be greatly appreciated. I hope everyone is staying safe and healthy. Thanks, Robbie