heavylifting

If they are both children from a parent then would they both not inherit the bounce?

Thanks, I have added the parameter and the moved the span (or tried to) but it still inherit the bounce from the h1? I'd rather it didn't have any bounce and just slid in a bit and went from 0 opacity to 1 https://codepen.io/heavymessing/pen/LYQJwKQ

But can you have two different animations on the parent and child? In this case there is a bounce animation on the H1 and within the H1 are the span tags, how can I get an ease in animation on the span tag/s and not have them bounce in at the same time?

Hi, In the codepn below the titles are the parent and the spans (the child inside the h1 are) the orange blocks. As well as fading in, I'm also trying to get the text to slide in a wee bit rather than just apear, or bounce in along with the orange block, is it possible to have two animation one fo the parane one for the child? Thanks

Thanks this has put me on the right track now and this has helped too https://codepen.io/PointC/pen/rNpXXWq

As part of the animation below I'm using GSAP cssRule to animate the coloured pseudo element/block across the screen. However because it's tied to the text block I can't get the block to appear first and then revel the text underneath. (Reason for using cssRule and the pseudo block is that I want to keep my HTML as semantic as possible and not crowd it with unnecessary divs.) Thanks

Yas, like that! That's great thank you.

Thanks for your reply. If you view the attached, I have highlighted what I would call the 'tail end' of the coloured block element. At this moment the end of the block disappears off screen, or eases out but what I'd like the block to do is slide over the text and instead of just continuing to slide fully off, I'd like the back end of the block (or maybe a smaller part of the block) to bounce at the end and on each bounce get smaller and smaller till it gets to zero.?

I'm in the middle of making a block reveal that goes over a text heading which I have done but would like the tail end of the block to bounce at the end when it has finished going over the text. I would like the tail end of the block to bounce at the end of the animation to zero instead of the block disappearing off screen. I have tried all the relevant easing in the GSAP demo page but they just seem to make the block element fly all over the pace at the end? Thanks.

That looks good, I'll have a go at that. Thank you.

How can I have the following only becom active when the browser is a certain width, i.e. over 1024px? var actionBurger = gsap.fromTo('.burger', {autoAlpha: 0,}, {duration:0.3, autoAlpha: 1, ease:'power2.out', paused:true}); ScrollTrigger.create({ trigger: ".header", start: "6px top", onEnter: () => actionBurger.play(), onLeaveBack: () => actionBurger.reverse(), }); Thanks

Afraid your example doesn't show up in my browser Mac - Chrome or FireFox?

Thanks, I see what you mean. Though it's odd that when pine I use 'pin: true' it's quite smooth? The only issue then is because it is pined it doesn't stay in the browser frame? https://codepen.io/heavymessing/pen/JjGOapW

Maybe it's a scale thing? At mobile size my version seems to work quite smoothly, at the large scale the jerkier it gets. https://codepen.io/heavymessing/pen/JjGOapW

Sorry. I just didn't want to keep reposting this link over and over again. https://codepen.io/heavymessing/pen/JjGOapW

In my latest version I cleaned up the SVG and paths and I can get it looking smooth on mobile view but not desktop?

Great, thanks.

Ah! That's cool, and kind of what I'm after, I'll tinker around and see how I get on. Thank you! One thing the lines are very jerky when they come on fast is there a way around that? https://codepen.io/heavymessing/pen/JjGOapW

I'm trying to get an array of paths to reveal themselves when the page is being scrolled down. As you can see from the pen I only have one and it isn't even in the middle of the browsers view. I was wondering if there is a way of doing this using Greensock? I would also prefer it if the edges of the lines where circles, would this be achievable if this were some kind big mask reveal? Thanks

Thanks, I shall give that a go.

Thanks Point C, How do I skip the duration? If I take it and the tween durations then nothing shows up?

I have the following: var secOne = new ScrollMagic.Scene({ triggerElement: '.section-a', triggerHook: 0, duration: $(window).height() - 100 }) .setTween( new TimelineMax() .add( TweenMax.fromTo(['.section-a .svg-a'], 0.5, { autoAlpha: 0 }, { autoAlpha: 1, force3D: false, ease:Power4.easeNone }) ) .add( TweenMax.fromTo(['.section-a .text-a'], 0.5, { autoAlpha: 0 }, { autoAlpha: 1, ease:Power4.easeNone } ) ) ) .setPin('.section-a') .addTo(controller); Which is fine apart from the fact that the animations have to come in smooth no matter how fast the user scrolling up or down. In this case if the user scrolls to fast then the animated parts suddenly show up. Is there a way to slow down the tween so that no matter if the user scrolling really fast they'll always get a smooth in out response from the animated tween? As you can see I have tried 'ease:Power4.easeNone' and that works to a degree but there's really nothing that stops it from zooming in on a fast scroll movement. Also I know scroll jacking is the work of Beelzebub but I'm being forced into this against better reasoning. Thanks

Wow, thanks Manfred! That's awesome! I'll have a play around with that and see where it goes : ]

Hey PointC Thanks for the links, I have seen the I hate tomatoes guy before but I am not familiar with Blake's work, I check it out. Thanks

hi, I'm trying to recreate the functionality of this New York Times page where as you scroll down the background fades into the section below and text elements can scroll over the background images before fading into the next row/section. I have made a start http://codepen.io/heavymessing/pen/WjbVNJ but it looks kind of clunky and I was wondering if there is a way to do it with scrollMagic and GreenSock. I have another version http://codepen.io/heavymessing/pen/zwGJLx but I don't know how to get one section fading in over the other? thanks,