Jump to content

adamhopkins

Members
  • Content Count

    4
  • Joined

  • Last visited

Community Reputation

2 Newbie

About adamhopkins

  • Rank
    Newbie
  1. 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
  2. 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
  3. 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
  4. 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