Jump to content
Search Community

Techassi

Members
  • Posts

    4
  • Joined

  • Last visited

Techassi's Achievements

2

Reputation

  1. After I removed the `top` ainmation the animation as a whole got way smoother. I think this was one of the main issues.
  2. Removing the `height` from the animation and replacing it with `scaleY()` is very tricky TweenMax.to(elem.querySelector('.project_text'), 0.4, {y: smallH, ease: easeF}); I managed to replace my `top` with the `y` selector. I am calculating the value off smallH like this: var smallH = (((window.innerHeight - 300) * 0.9) * 0.4 - elem.querySelector('.project_text').getBoundingClientRect().height) / 2; I little bit more inconvenient but i works! Another thing I did to improve performance is to replace all my `opacity`'s with `autoAlpha`
  3. I noticed that the site won't load... Should be fixed now. I will try to implement your suggestions and will report back!
  4. Hi, I am working on a project for university. I am using some animations on my site and on my desktop machine they all work fine and are smooth. But on my smartphone that's a whole different story. TweenMax.to(document.querySelector('.logo'), 0.4, {opacity: '0', ease: easeF}); TweenMax.to(elem.querySelector('.project_bg'), 0.4, {height: '40%', ease: easeF}); TweenMax.to(elem.querySelector('.project_shade'), 0.4, {height: '40%', ease: easeF}); TweenMax.to(elem.querySelector('.project_text'), 0.4, {top: '20%', ease: easeF}); TweenMax.to(elem.querySelector('.project_desc'), 0.4, {opacity: '0', ease: easeF}); TweenMax.to(document.querySelector('.project_total'), 0.4, {opacity: '0', ease: easeF}); TweenMax.to(document.querySelector('.close_button'), 0.4, {opacity: '1', ease: easeF}); TweenMax.to(elem.querySelector('.content'), 0.4, {opacity: '1', height: 'auto', y: window.innerHeight * 0.3, ease: easeF}); These animations in particular are very slow and stuttering on mobile devices. I don't know if these animations can be optimized but if yes it would help me alot if someone can explain me how. My easing function looks like this: easeF = new Ease(BezierEasing(.37,.01,0,.98)); Do I have to reduce the amount of animations or do I have to use a timeline (which I didn't at all until now)? URL: https://sftp.hs-furtwangen.de/~lautensc/gis/ Cheers and best regards!
×
×
  • Create New...