Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

19 Newbie

About emilychews

  • Rank
    Advanced Member

Recent Profile Visitors

982 profile views
  1. You know that is so embarrassingly simple. I love GSAP, but often go months at work without using it and then seem to forget the obvious stuff. Thank you ever so much for helping. Thankfully another one or two issues I had I solved via the docs but really appreciate you taking the time to help.
  2. Hi Zach, That has sorted the situation in regards to the button not disappearing as it should when you scroll back up past the scroll trigger point on mobile. I still have the problem though that if I scroll past the button on desktop (i.e. to the bottom of the page) and then resize the window from desktop to mobile (less than 579px), the button does still disappear until I scroll up and down again? Thanks
  3. Hi, I posted a topic over the weekend where solving one problem seems to have created another. This demo is a simplified version of a page that is going to have two posts/articles per page and then a 'next post' button below the final/2nd article (which then links to another page with two articles etc). On mobile I want it so the button appears after the user scrolls past the bottom of the column containing the two articles (on the actual site, below the articles are a couple of adverts, a sign-up form, and a footer). The problem I now have is two-fold, but
  4. Hey, thanks Petr for such a brilliant answer. I'm not back off vacation / in front of a computer until Wednesday, but wanted to say thank you in advance for taking the time to answer.
  5. Hi, I have a 'Next Post' button on a site that links to the next post in chronological order. On mobile I want to change the position to fixed so it stays in the bottom of the screen after you scroll past the main text. The problem I'm having is when I reduce the window size down, this does indeed happen, but when I resize the window back up the button disappears. I have a JS 'resize' event on the function that fires the GSAP scroll trigger so am a bit confused what's happening? Any help would be wonderful.
  6. Hi, I have a pinned animation that also has an opacity animation on it. This all works OK when it animates in. When I scroll to the onLeaveBack scroll position where the animated box disappears in preparation for it to start again onEnter it just snaps to opacity 0 with no animation. Is it possible to animate this specific part of the process? So it disappears as smoothly as when it animates in? I did try doing this as a separate animation, but with the two sets of toggleActions it didn't seem possible? In the CodePen you can see what I mean with the red box as it
  7. Hi, Is there anyway of pinning an element permanently? I need some type of infinity value to put in the end property. The .box-2 element is going to be for an ad that comes in and gets pinned at the side of article and I need it to stay fixed in position permanently once pinned. Many thanks for any assistance. Em.
  8. Hi, When you add a scrub property to a scrollTrigger, does the allocated ease still apply? Obviously the duration property no longer applies, because the time is then bound to the scroll itself (i.e. a mouse-wheel etc), but wondered if the scrub animation still follows an ease curve? Many thanks, Em
  9. Hi, Is there a way of triggering different instances of the same CSS class as they enter the viewport. I've tried playing around with the ScrollTrigger.batch() method but can't seem to get this to work. In the below CodePen I'd like each of the.box elements to animate individually as they enter the view port as opposed to them all animating when the first one does. Thanks in advance for any help
  10. Hi, I have a scrollTrigger where an element is tweened using the scrub property so it produces a slight parallax using y:-100 , and when it gets to the middle of the viewport is the pinned with the pin property. At the moment this causes the tween to jank back 100px when the second scrollTrigger is activated. I guess what I need on the 2nd scrollTrigger is the equivalent of having a start value of start: "0 (50% -= 100)", although I know that property value isn't valid. Is there a way of having a start value of a tween in a position that is percentage value
  11. Hi, I'm just starting out with the new ScrollTrigger plugin and I can get it play ball with the gsap.to object, but can't seem to get it work if I use it with var tl = gsap.timeline(); and then tl.to ? Can you only use the scrollTrigger plugin on a `gsap` object ? gsap.registerPlugin(ScrollTrigger); // GSAP TIMELINE var tl = gsap.timeline(); tl.to(".box-3", { scrollTrigger: ".box-3", duration: 3, opacity: 0.1 }); Many thanks, Em
  12. Thanks @PointC I deleted my initial reply because I see it is part of TweenMax (it was a question about how to add it to codepen because it's not on the list of plugins you can try on codepen).