Jump to content

pauljohnknight

Members
  • Content Count

    38
  • Joined

  • Last visited

Community Reputation

21 Newbie

About pauljohnknight

  • Rank
    Advanced Member
  1. 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.
  2. 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 smooth compared to other pages, and the animations were virtually the same amount of code and with similar transforms / scale values etc? The reason it was animating OK on the Contact Page is because this page is a 100vh single section so everything apart from the footer is above the fold. On my other pages I wrapped the page content below the fold in a wrapper div, and in the JS file I set it to `display: none` for Firefox browser versions, and then used a setTimeOut function that switches it to 'display: block' after the duration of the animation, and hey presto everything animated buttery smooth. Below is the code I used: My main reservations are that: a) when reloading the page it will effectively always return to the top of the page, b) I'm worried there may be an SEO hit for initially hiding so much content, c) it just seems like a really terrible idea even though it works really well. Feel free to chip with any thoughts, I'm not particularly advanced with JS or GSAP, so would appreciate any comments var mainContent = document.getElementById("main-content"); var ff = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; if ( ff ) { mainContent.style.display = "none"; // SET TIMEOUT ON EVERYTHING BELOW SECTION ONE ON LOAD window.setTimeout(function() { mainContent.style.display = "block"; },2000) }
  3. 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.
  4. 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.
  5. 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.
  6. 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
  7. 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
  8. 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.
  9. 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.
  10. Hi, I'm doing a simple morph that repeats between two shapes (with a rotation on as well). When the animation runs, it morphs, then seems to pause for 3 seconds, then seems to do a fluid repeat morph between the two states (which is what I want), and then starts again? How do I get a morph to fluidly go from one shape to another on repeat with out the pause. I'm using yoyo: true as well and thought this would solve it? I'm flummoxed. var tl = new TimelineMax({repeat: -1, yoyo: true}); tl .to("#shape-1", 3, {morphSVG:"#shape-2", rotation: 180, ease: Power1.easeIn}) .to("#shape-2", 3, {morphSVG:"#shape-1", rotation: 180,ease: Power1.easeOut}) Many thanks,
  11. God, that didn't ever occur to me to use the ternary operator. That was also useful to use on the duration value as well on a different timeline. Thanks ever so much. Paul
  12. Hi I have an animation that is all tickety-boo, but on smaller screens (less than 736px) I have a marginally different layout and I need to tweak one animation value. In the code below, in the part I've highlighted as // **** THIS IS THE BIT I MEAN, I need to weak the value of "-=.85" which causes the appropriate overlap of the timeline, and change this to "-=.5". My question is, can you only do this by copying and renaming the entire timeline function and putting it inside an if(window.innerWidth < 737){} if statement, and thus change the single value, or is there a more efficient way of doing it? I'm conscious of duplicating a big chunk of code for such a small tweak. function initialIntro1() { var tl = new TimelineMax(); tl // set elements for animations .set(topBlockStagger, {scaleY: 0}) .set(row1, {transformOrigin: "left", scaleX: 0}) .set(logoContainer, {visibility: "hidden"}) .set(menuButton, {scaleX: 0, visibility: "hidden"}) .set([leftBlock], {opacity: 0}) // animations .add("vertical-drop") .staggerTo(topBlockStagger, .75, {transformOrigin: "0 0", scaleY:1, ease: Power2.easeIn}, -.15) .to([menuButton, logoContainer], 0, {visibility: "visible"}) // **** THIS IS THE BIT I MEAN .add("horizontal") .to([row1,logoContainer, menuButton], .75, {transformOrigin: "left", scaleX: 1, ease: Power2.easeIn}, "-=.85") // covers #menu-button and #row-1 .to(contract, 1, {transformOrigin: "right", scaleX: 0, ease: Power3.easeOut}) .to([leftBlock], 3.5, {opacity: 1, ease: Power3.easeOut}, "horizontal") return tl } // call animation on pages 1 and 3 of the site var masterTL = new TimelineMax(); if (p1 || p3) { masterTL .add(initialIntro1()) }
  13. Hi I saw this website today (link below), where there is text being animated along a 3d path by the look of it. Is it possible to do something similar in Greensock. I've got a pretty good grasp of the basics of GSAP, but was wondering where to start with something like this. https://www.arche68.com/front/en Many thanks for any ideas Paul.
  14. Oh boy, that's a total brain freeze . Thanks for the example @PointC, I think I'm going to have to do some proper background reading there. I've not used SVG clip-paths or masks before. Paul