Jump to content
GreenSock

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

kylemichel

ShockinglyGreen
  • Posts

    2
  • Joined

  • Last visited

About kylemichel

kylemichel's Achievements

Newbie

Newbie (1/14)

0

Reputation

  1. @GreenSock Thanks so much for the help. I'm sifting through your recommendations to see what works (btw I am on a mac, using Chrome...). Quick question... As soon as I applied xPercent and yPercent instead of x: and y:, I got this console error: Uncaught TypeError: Cannot create property 'startAt' on string '-=1.9' Any idea why this may be happening? The startAt property worked perfectly before I started using xPercent and yPercent. By the way, the live URL is http://www.kylemichel.me/final/index.html
  2. Hey everyone - so excited to be exploring GSAP recently. I've been working on building a new portfolio and GSAP has unlocked an entirely new world for me... have been a web developer and designer for a while but I have a feeling I'll be in this community for a long time. I have been getting along quite nicely in regards to the learning curves of the various plugins, but I've been running into some performance issues that consistently result in lost frames/stuttering animations. I've cut out different parts of my timelines and narrowed the "problem child" down to translating PNGs. On my current site, everything moves buttery-smooth until I introduce one tween for a project image - I'm creating a slideshow of sorts, and want an image to represent each of my projects in my portfolio. When I translate my project images (PNGs, usually around 2000x1400 pixels in native size), all of my buttery-smoothness goes to ****. While I first resorted to searching through the forum and finding this seemingly helpful article, it actually didn't help much, as I've tried my best to apply best practices throughout my code and only translate elements using x:, y:, etc. Here's a look at the actual code that I'm having an issue with: function moveIn() { var inTL = new TimelineMax({onComplete: resetFiring}); inTL.staggerFromTo(splitComplete[0].lines,2,{y: '100%',ease: Power4.easeOut},{y: '0%',ease: Power4.easeOut},0.1) .fromTo('.background', .8, {scaleX: 0, ease: myEase}, {scaleX: 1, transformOrigin: '100% 50%', ease: myEase}, "-=1.9") .staggerFromTo(splitComplete[1].lines,1,{y: '200%',ease: Power4.easeOut},{y: '0%',ease: Power4.easeOut},0.1, "-=1.9") .staggerFromTo(splitComplete[2].lines,1,{y: '200%',ease: Power4.easeOut},{y: '0%',ease: Power4.easeOut},0.1, "-=1.9") /* .to('.featImg', 1, {x: "-80%", ease: Power4.easeOut}, "-=1.9")*/ .staggerFromTo(splitCompleteChars[0].chars, 1, {y:100, rotation: 25, ease:Power4.easeOut},{y:0, rotation: 0, ease:Power4.easeOut}, 0.1, "-=1.9") .staggerFromTo(splitCompleteChars[1].chars, 1, {y:-30, rotation: 25, ease:Power4.easeOut},{y:0, rotation: 0, ease:Power4.easeOut}, 0.01, "-=1.9") .staggerFromTo(splitCompleteChars[2].chars, 1, {y:-30, rotation: 25, ease:Power4.easeOut},{y:0, rotation: 0, ease:Power4.easeOut}, 0.01, "-=1.9") } The above is buttery smooth ^. function moveIn() { var inTL = new TimelineMax({onComplete: resetFiring}); inTL.staggerFromTo(splitComplete[0].lines,2,{y: '100%',ease: Power4.easeOut},{y: '0%',ease: Power4.easeOut},0.1) .fromTo('.background', .8, {scaleX: 0, ease: myEase}, {scaleX: 1, transformOrigin: '100% 50%', ease: myEase}, "-=1.9") .staggerFromTo(splitComplete[1].lines,1,{y: '200%',ease: Power4.easeOut},{y: '0%',ease: Power4.easeOut},0.1, "-=1.9") .staggerFromTo(splitComplete[2].lines,1,{y: '200%',ease: Power4.easeOut},{y: '0%',ease: Power4.easeOut},0.1, "-=1.9") .to('.featImg', 1, {x: "-80%", ease: Power4.easeOut}, "-=1.9") .staggerFromTo(splitCompleteChars[0].chars, 1, {y:100, rotation: 25, ease:Power4.easeOut},{y:0, rotation: 0, ease:Power4.easeOut}, 0.1, "-=1.9") .staggerFromTo(splitCompleteChars[1].chars, 1, {y:-30, rotation: 25, ease:Power4.easeOut},{y:0, rotation: 0, ease:Power4.easeOut}, 0.01, "-=1.9") .staggerFromTo(splitCompleteChars[2].chars, 1, {y:-30, rotation: 25, ease:Power4.easeOut},{y:0, rotation: 0, ease:Power4.easeOut}, 0.01, "-=1.9") } When I add in the image ^, everything becomes extremely choppy. I'm sorry for not providing a Codepen, as I'm not sure how I could simulate the environment in which I'm experiencing the issue without just sharing my site-in-progress. Is there something I can do to fix the performance that I missed? Smaller image, different image format, no image at all, different tweens? Thanks so much Any and all help would be appreciated... I have relied on this community heavily for my development thus far and figured it was time to speak up.
×