Daniel Hult

That fixed it! Thank you Im a little unsure when to use the .set() method. Like on page load, wouldn't the javascript run after the css - and that way you would first have the initial state with css (e.g no transform, so the item is visible) and then the javascript runs and then set's the transform and hide the element?

As Shaun said, it could be a browser bug/thing. Just curious, what browser are you using Zach?

The menu is stuck in this weird position like this (had to upload an image because the file size limit here is very small): https://ibb.co/2MDYBGv

Hi! I have a problem on a site with the menu not re-calculating the transform property to hide the menu. https://human-as.appex.dev Steps to reproduce: Go to website and open the devtools/console Open the menu with the toggle in top right corner Close the devtools/console Click the menu toggle again to close the menu Code used for the menu animation: CSS & GSAP code for hiding the menu: transform: translateY(-100%); const timeline = new TimelineMax({ paused: true, reversed: true }) timeline .to(this.$refs.mobileNav, 1, { y: '0', ease: Expo.easeInOut }) .staggerTo('.mobile-nav__link', 0.5, { autoAlpha: 1 }, 0.1, '-=0.5')

Hey! I get this error in the console (Uncaught: cannot tween a null target) on a Vue app here: human-as.appex.dev Is it possible to trace what is causing this?

It works as expected when I remove "timeline.progress(1).progress(0)". Is it okay to do it without it?

When I don't have it part of the timeline though it doesn't work as smoothly as intended. I want the scroll to be a part of the timeline so that after they've been scrolled down I do some other animation in the end as well. To be honest Im not sure why I have timeline.progress(1).progress(0). I got help from one of you earlier today that suggested that I put it in my timeline so it starts correctly(?) Sorry to bother you with all these questions, but Im learning a lot from these forums so that's a big plus

It's the same code as here: https://codepen.io/daniel-hult/pen/dybZmbo

It's supposed to scroll to the hidden content that's revealed below the image when you click the icon

Hi! I use the ScrollTo plugin in a forEach loop with different sections. You can see the live site here (click on the plus icon); https://human-as.appex.dev/kontakt Not sure why, but the scrollTo plugin only works sometimes. If you hard refresh the site and try, it will at one point not work. I know this is not much to go by, but do you know why this could happen?

That fixed it! Thank you so much!

Yeah, that's what I meant

Sorry for so many questions - but in your last codepen the height of the hidden content is still "visible" when you click the "close" button after it's opened ?

But if I have it set to "height: 0px" in the css from the start - will that work?

Yeah, I can't set a fixed height to it though because it's content that comes from Wordpress on the real site. Any way around this?

Hi! I've made a quick codepen showing a problem with animating height/display property smoothly. As you see in the codepen, when you click "Open content" - some content below will "jump" to a new position because the hidden content will take up space when being displayed. Any idea how I can smoothly make this transition from hidden/visible with height so that the content below will not jump like that?

Thank you so much!!

Would you be so kind to help me write that? Not sure how I would implement that

Hey again, Thank you for the reply! Working great - except one thing. If I add an eventlistener on resize to check what width it's at, the animation keeps looping after it's started. Do you know how to solve this? I edited the codepen for you to see

Hi! As you can see in the codepen, I have a section with an image and some info text on the side. When you click the button, the image will go from 50% width to 100% and the grayscale will be removed (image will get color). You also get scrolled to a section a below it with some hidden content - and there you can reverse the timeline. If you resize the browser, you see that the image and text in the top stack on top of each other. At this browser width (phone) I don't want the image to resize when the timeline is run - only the filter/grayscale to happen and the scrolling. So my question is - how do I go about making one timeline for desktop and one for mobile? Do I have to copy/paste the code and remove the one I don't need? Hope this was clear! Thanks!

Don't know if you know Vue, but I have this animation in Vue/Nuxt which makes it a little harder to implement what you did. I currently have this in my methods: Do you know how I can implement that in Vue?

Hi! Why is the animation so slow to reverse in this example? I want it to start instantly like it does in forward motion

Hey! Not a big problem, but maybe someone has asked this in the past - so Im trying my luck here. I have prettier installed with VSCode and it auto formats my code from from the first example to the last. Do you know how I can prevent this behaviour without turning it off? tl.fromTo('.menu-nav__wrapper',1, { y: 20 },{ y: 0 }) tl.fromTo( '.menu-nav__wrapper', 1, { y: 20 }, { y: 0 } )

I just made a quick codepen here of what Im making. Why does the svg logo behave so weird? Like flickering? https://codepen.io/daniel-hult/pen/WVJdzG

Thank you so much!