Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

21 Newbie

About pauljohnknight

  • Rank
    Advanced Member

Recent Profile Visitors

1,384 profile views
  1. Hi, I have a word made of spans where I would like them to stagger in when triggered by the scroll trigger - I can seem to get it play ball? The letters are having the animation applied to them, but the stagger isn't working? If someone could point out what I'm doing wrong that would be great. // 'MOVING' WORD var moving = document.querySelectorAll('span') if (moving) { gsap.utils.toArray(moving).forEach(function(letter) { gsap.to(letter, { duration: 1, y: 0, opacity: 1, stagger: .1,
  2. Thank you. I thought it was because you'd written the end value is a slightly different manner and it might have been an inbuilt method that was acting accordingly. Thanks for clarifying and for the original answer.
  3. Thanks Zach that works a treat. Can I ask how that manages to pin the section as well? That looks super useful, but I can't quite get my head around it
  4. Hi, I have a scrollTrigger animation when a section (.pin-section) hits the middle of the view port. This section is pinned for the same amount of pixels as the section height using end: () => "+=" + document.querySelector('.pin-section').offsetHeight During this pinning I have a star that basically keeps scrolling so the user knows to still scroll. This is done by using the .pin-section element as the trigger again and using the end: () => "+=" + document.querySelector('.pin-section').offsetHeight as the end value once again. As well as the simplified CodePe
  5. Hi Jonathan, I'll try and set up a simplified example to show the jank. Also, I'm not using canvas, it's all SVG - I think you're referring to the original poster at the top of the thread who was someone else. I was chipping in because I did a search on GSAP jank in Firefox. Many thanks, Paul.
  6. Hi @Jonathan, @PointC, @Carl I have found a work around to this Firefox jank problem, but I'm not sure if it's a potentially terrible idea? On a localhost dev site I noticed the animations were very janky in Firefox for the reasons stated above in the thread, because of the nature of the animations, adding the rotation property, although improving things slightly in FireFox, didn't fix things completely (I also have a static rotation on an element being animated so this created other side effects). I noticed however that my Contact Page animations were all silky s
  7. Thanks Craig. I really like what you did with the image morph, so I'm going to see if I can't get to grips with that and look at tweaking the design accordingly.
  8. Hi Craig, Thanks for this, that's great. I need to up my SVG knowledge. Also before I start playing around with this, I've just realised because the shape I'm morphing has preserveAspectRation="none" on it to make it responsive, I'm think you probably can't have an <image> in an SVG with this attribute because it will distort the image when you reduce the window size? I've done a quick screen cast and the image was going to go inside the main dark blue polygon that morphs in this video, but I'm thinking I may have to re-think by approach to this.
  9. Hi With the morphSVG plugin, is it possible when morphing between two path shapes to have it so that the final path shape can display a background image (say, with the SVG <image> that has been clipped so it fits the shape). What would happen is you'd have one path shape with a background that is just a fill colour, and this will then morph into the new path shape showing a background image. I'm thinking this probably isn't possible? I've set up a pen here of two shapes morphing in case it is possible and someone can illustrate how.
  10. No I'm not using a build system on this project and it was happening in chrome. I tried it again this morning with the same issue. When I'm back home on Monday i'll try and replicate it on Codepen, I suspect it might be a problem this end if Craig's pen works, which I'll have to have look into. Apologies in advance if it wasted anyone's time. Paul
  11. Hi, I've updated a dev site today to the latest version of GSAP, and the ScrollMagic triggered tweens/animations stopped working. When i reverted back to the older version of GSAP, everything behaved as expected. Are there any known issues with this? Paul
  12. Hi Craig, Yes i did end up doing that actually when I was playing around with the easings. In relation to this, I've used a Sine ease with an easeIn and easeOut to try and get the morph as smooth as possible on each of the two morph tweens. I guess there will always be a slight jerk effect because the morph has to stop and restart? Even if I was to use the custom ease plugin? Updated pen for quick reference.
  13. Thanks for both answers The problem was being caused by my second tween - I didn't realise when returning to the original svg shape with MorphSVG that you need to reference it in both parts of the tween. Shaun's tip of having the rotation outside of the morphing was very useful as well. Thanks again Paul.