adamhopkins

Hello, I'm planning on integrating a small logo animation to a website I'm working on. I intend to use GSAP for it's timeline function. It feels like a nice fit. However I am having some difficulty achieving the desired effect. The logo itself, as you can see by the Codepen link, is just simple with a basic circle outline path. What I'd like to happen is have the outline path animate in from the top in a 360 degree motion. I have tried different stroke arrays and alike but it hasn't has the effect I need. Adding the stroke creates a hollow outlined circle instead of a flat circular path I'm after. I have attached an image with a blue stroke to show what I mean. Adding a stroke naturally creates a line either side of the path. My question is, do I need the GSAP's SVG plugin to achieve this? It feels like it would be overkill for what I would need it for in this case. Is anyone able to to offer some assistance on how I can integrate this into a my GSAP timeline.

I have tweaked the background images to remain static rather thn loading a random image everytime. Hopefully that may have done the trick. Otherwise, it seems OK to me

Hello, I have been looking into getting a smooth scrolling effect using GSAP. After looking into Scroll Magic, I realised that what I want to achieve can be done using just using a GSAP timeline. I found something on Codepen which had a similar look to what I was after. I have tweaked this myself but have come to point where I need a bit of help/advice. Basically, my webpage will consist of one page made up of 3 full width sections, each one being 100vh/% in height (so 3 separate panels). The first panel will contain some information and a background image. The second panel will also contain some content but will have a background video applied instead of an image The third will be the same as the first, only with a different background image being used. What I'm trying to achieve to have the panels transition into one another smoothly as you scroll. A simple opacity swap and scale tweak so that as you scroll down the page, panel 1 fades into panel 2 and then panel 2 fades into panel 3. I am having some difficulty with my timeline I think. Currently the top 2 panels fade into each other quite well but I'm having difficulty adding the 3rd panel into the mix. If anyone can offer any advice/help on this then it'd be much appreciated. My codepen URL is https://codepen.io/anon/pen/ZobLYL

Thanks for the reply Carl...and thanks for taking a look at my issue. To my relief, I have managed to get the desired effect after some work last night. I wish I'd have thought of making the tweaks you did as it certainly gives a better idea of the bigger picture and whats going on behind the scenes. I'd have probably got to the end a lot quicker. Anyway, here is my tweaked (and finished) slider http://codepen.io/anon/pen/wGMbLj?editors=0110

Hello, I'm new to GSAP and just getting to grips with it. I'm using a modified codepen post as a guideline for making a slider. I want the slider to have specific effects and feel like I'm almost there. I was hoping that someone here can help me get over the finish line. http://codepen.io/anon/pen/MyKVJW As you can see from the codepen link, My slider contains 4 slides, within each slide are two darkly colored blocks. What I'm trying to achieve is when the slider changes, the left hand block slides in from the top as the right block slide up from the bottom. It seems like the right hand block is doing this but the left hand block is not. There seems to be a delay in the animation of the left block The slides use the following timeline var tlSlideOut = new TimelineLite() tlSlideOut.fromTo($prevSlide, 2, {top: "0%"}, {top: "100%"}) .add(TweenMax.fromTo($prevSlideSmBlock, 2, {top:"0%"}, {top:"100%"}), 0) .add(TweenMax.fromTo($prevSlideLgBlock, 2, {top:"0%"}, {top:"-200%"}), 0) var tlSlideIn = new TimelineLite() tlSlideIn.fromTo($currentSlide, 2, {top: "-100%"}, {top: "0%"}) .add(TweenMax.fromTo($currentSlideSmBlock, 2, {top:"-100%"}, {top:"0%"}), 0) .add(TweenMax.fromTo($currentSlideLgBlock, 2, {top:"200%"}, {top:"0%"}), 0) Is anybody able to offer me some advice on what maybe missing with this....any help would be much appreciated. Many Thanks Adam