Jump to content
Search Community

iOS error reloads webpage when Tweening too much?

Jimmi Heiserman test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have a very hard to track down bug that entirely seems tied to iOS Safari on mobile. But only some versions. So weird.

 

I deconstructed some parts from a project I am working on that is causing me lots of trouble in iOS Safari. Here is the simpler link, cleaned up to hopefully isolate just the issue.

 

http://jimmiheiserman.com/bannerDev/crash/?crash=6and7andX this crashes  6, 6 Plus, 6s Plus, 7, and iPhone X, (but NOT 6s or X )

http://jimmiheiserman.com/bannerDev/crash/?crash=7andX This crashes 7 and X (and sometimes 6s Plus)

http://jimmiheiserman.com/bannerDev/crash/ This won't crash any of them.

[Then the weird one!]

http://jimmiheiserman.com/bannerDev/crash/?crash=filterOK this allows the filters to NOT crash the browser, because I removed scale from the tween

 

I am not sure if it is caused by my inline SVG's, my large sprite sheet, but if I remove too many things, the error does not occur. So I am not able to know exactly what is causing it. A combination of things I imagine. But it does occur right when I am about to animate brightness, along with top, left, scale, and zIndex. But if I remove a few tweens, such as scale, then the filter doesn't cause a crash.

 

below is an excerpt that shows what the url parameters are doing that causes the crash.

 

		var orbits;
		var crash = getUrlVars()["crash"];

		orbits = [{left:'50%', top:'100%', scale:.25, zIndex:6},
							{left:'0%', top:'70%', scale:.12, zIndex:5},
							{left:'20%', top:'30%', scale:.08, zIndex:4},
							{left:'50%', top:'0%', scale:.05, zIndex:3},
							{left:'80%', top:'30%', scale:.08, zIndex:2},
							{left:'100%', top:'70%', scale:.12, zIndex:1}];

		if (crash == 'filterOK') {
			console.log('filterOK');
			orbits = [{left:'50%', top:'100%', zIndex:6, filter: 'brightness(100%)'},
								{left:'0%', top:'70%',  zIndex:5, filter: 'brightness(80%)'},
								{left:'20%', top:'30%', zIndex:4, filter: 'brightness(60%)'},
								{left:'50%', top:'0%', zIndex:3, filter: 'brightness(40%)'},
								{left:'80%', top:'30%', zIndex:2, filter: 'brightness(60%)'},
								{left:'100%', top:'70%', zIndex:1, filter: 'brightness(80%)'}];
		}

		else if (crash == '7andX') {
			console.log('crashing iPhone X (and 6s Plus and 7 sometimes)');
			orbits = [{left:'50%', top:'100%', scale:.25, zIndex:6, filter: 'brightness(100%)'},
								{left:'0%', top:'70%', scale:.12, zIndex:5, filter: 'brightness(80%)'},
								{left:'20%', top:'30%', scale:.08, zIndex:4, filter: 'brightness(60%)'},
								{left:'50%', top:'0%', scale:.05, zIndex:3, filter: 'brightness(40%)'},
								{left:'80%', top:'30%', scale:.08, zIndex:2, filter: 'brightness(60%)'},
								{left:'100%', top:'70%', scale:.12, zIndex:1, filter: 'brightness(80%)'}];
		}

		else if (crash == '6and7andX') {
			console.log('crashing 6, 6 Plus, 6s Plus, 7, and iPhone X, (but NOT 6s or 8)');
			orbits = [{left:'50%', top:'100%', scale:.25, zIndex:6, webkitFilter: 'brightness(100%)', filter: 'brightness(100%)'},
								{left:'0%', top:'70%', scale:.12, zIndex:5, webkitFilter: 'brightness(80%)', filter: 'brightness(80%)'},
								{left:'20%', top:'30%', scale:.08, zIndex:4, webkitFilter: 'brightness(60%)', filter: 'brightness(60%)'},
								{left:'50%', top:'0%', scale:.05, zIndex:3, webkitFilter: 'brightness(40%)', filter: 'brightness(40%)'},
								{left:'80%', top:'30%', scale:.08, zIndex:2, webkitFilter: 'brightness(60%)', filter: 'brightness(60%)'},
								{left:'100%', top:'70%', scale:.12, zIndex:1, webkitFilter: 'brightness(80%)', filter: 'brightness(80%)'}];
		}


...
...
...

		for (i = 0; i < 6; i++){
			tlToy.to('.spaceship1', 2, orbits[i%SHIP_COUNT], 'orbit' + (i+1));
			tlToy.to('.spaceship2', 2, orbits[(i+1)%SHIP_COUNT], 'orbit' + (i+1));
			tlToy.to('.spaceship3', 2, orbits[(i+2)%SHIP_COUNT], 'orbit' + (i+1));
			tlToy.to('.spaceship4', 2, orbits[(i+3)%SHIP_COUNT], 'orbit' + (i+1));
			tlToy.to('.spaceship5', 2, orbits[(i+4)%SHIP_COUNT], 'orbit' + (i+1));
			tlToy.to('.spaceship6', 2, orbits[(i+5)%SHIP_COUNT], 'orbit' + (i+1));
		}

 

So you can only trigger this bug using certain versions of iPhone. Oddly, iPhone 8 seems immune to this bug. Works fine on Android, IE, EDGE, Chrome, FF, even Chrome on iPhone.

 

What's weird, is if I just do a brightness tween alone, it does not cause the browser to crash. or even if I do brightness tween along with a few other tweens on the same object. But once I add a mixture of tweens into one call, it crashes the browser. But short of trying hundreds of combinations, it feels like it triggers a bug when there is a lot going on. But I have had "a lot going on" before, and browsers just slow down, get choppy. I've never seen a GSAP animation break just some versions of Safari.

 

While this bug seems quite difficult to track down from my perspective, maybe in your travels of cross-compatibility you have seen some very weird things with iOS. It almost feels like a race condition is being hit.

 

Link to comment
Share on other sites

10 hours ago, Jimmi Heiserman said:

I have a very hard to track down bug that entirely seems tied to iOS Safari on mobile. But only some versions. So weird.

 

GSAP doesn't do any rendering. It changes values over time. If the value gets correctly set, which it does, then it's not related to GSAP.

 

I think the problem is that you're asking the browser to do too much. Mobile devices are pretty limited when it comes to performance. I'm on a workstation and your animation causes a massive drop in performance during the first couple of seconds, and the layers keep on changing until rotation is the only thing being animated. 

 

0rdhd7k.jpg

 

 

When you animate something other than transforms, opacity, or a filter, the current raster of the content has to be destroyed, recalculated, rasterized, and uploaded to the GPU, which is slow.

 

left and top are the biggest problems here. z-index is questionable. scale is a transform, but it's also questionable because it causes a repaint if you don't use will-change in certain browsers.

 

{left:'0%', top:'70%', scale:.12, zIndex:5, filter: 'brightness(80%)'}

 

 

And filters can be slow due to stacking contexts.

https://developers.google.com/web/updates/2017/10/animated-blur

 

 

I would first try switching left and top with x and y, and setting will-change in your CSS.

 

.spaceship {
  will-change: transform, filter;
}

 

Just be aware that will-change can cause problems, and scaling might not look good.

https://greensock.com/will-change

 

https://dassur.ma/things/forcing-layers/

 

 

If you still have problems, you should look into using canvas.

 

 

  • Like 5
Link to comment
Share on other sites

Thanks for the detailed reply. I def think this is a safari bug and not a GSAP issue, as always. I added the will-change: transform, filter and it worked great in Safari mobile and fixed the bug!... but it added all sorts of flicker to Chrome and FF. Figures. Then I fixed the flicker with just applying will-change to the filter. but the z-index was all out of whack in Chrome after I did that. I couldn't get any layers to play nice, no matter how I layered them, forced high z-indexes, etc. after the will-change was active. It's just too buggy in Chrome.

 

I ended up just turning off filters for Safari mobile. It was a small design tweak that most users will still see nicely. I hate turning off features for a demographic, but I just couldn't get around this browser crashing bug on their phones.

 

Thanks again though!

Link to comment
Share on other sites

Yeah, will-change can fix some problems, but it might create a bunch of new problems that you weren't expecting. That's why I said you have to be careful with it.

 

I'm thinking that you could probably simulate brightness. Create a version of your sprites that are all black, or some dark color. Overlay those dark sprites on top of your regular sprites, and animate the opacity to simulate brightness.

 

 

  • Like 2
Link to comment
Share on other sites

  • 3 years later...
14 hours ago, OSUblake said:

That animation is from this thread. Seems that adding will-change will get rid of the paint flashing.

 

 

Yep it was a tread of mine, so is that the problem? @elegantseagulls  @OSUblake ?

Yep, sorry the website is still on staging  mode, so I did locked it.

 

 

Thanks for the hint. Will change to columns? To square elements?

https://staging11.whynot.media/unlock
 

//1
let body_class=document.body.classList;
function _funzioni_home(){
  if(body_class.contains("home")){
    
   /*clip path cerchio home*/
!function skew_home(){
  let skews = document.querySelectorAll(".skew-clip-path");
  skews.forEach((skew) => {
    let clip_polygon = gsap.timeline({
      scrollTrigger: {
        trigger: skew,
        start: "top center",
        scrub: true,
      }
    });

    clip_polygon.fromTo(
      skew,
      {
        clipPath: 'circle(11.5% at 27.5% 19%)',

      },
      {
        clipPath: 'circle(200% at 25% 25%)',
        duration: 1.5
      }
    );
  });
}(); //skew
    /*clio path prima sezione home*/
    /*griglia grande home*/
!function sequenzagrid() {
let cont_ul_grid_top = document.querySelector('.griglia-home');
if(cont_ul_grid_top){
gsap.fromTo('.griglia-home div:nth-child(n + 2)', {
  autoAlpha: 0
}, {
  autoAlpha: 1,
  stagger: 0.5,
  scrollTrigger: {
    trigger: cont_ul_grid_top,
    start: "top 70%",
    end: "bottom bottom+=70",
    scrub: true,
  }
});
}
}();
    /*griglia grande home*/
    /*quadrati di ogni colore*/
let quadro = document.querySelectorAll('.quadrato');
if (quadro){
  quadro.forEach(quadrato => quadrato.style.backgroundColor = randomColor());


//apply colours
function randomColor() { 
let lastPick;
let rand;
  var back = ["green","blue","gray","yellow","orange","purple","pink", "white", "limegreen", "lightblue", "orangered", "goldenrod", "darkred", "blueviolet", "aqua" , "teal", "chartreuse", "royalblue", "crimson", "salmon", "deeppink", "dodgerblue", "gainsboro"];
  rand = back[Math.floor(Math.random() * back.length)];
  rand==lastPick?randomColor():rand;
  lastPick = rand;
  return rand;
}
    /*quadrati di ogni colore */
  /*animazione iphone*/
 let tl = gsap.timeline({scrollTrigger:{
  trigger:".mega-contenitore-iphone",
  start:"top top+=450",
      scrub: true
}})

tl.fromTo(".quadrato-screen-mockup1",{scale:.1,}, {scale:1,x: 0,y:0,duration:.3});

tl.fromTo(".quadrato-screen-mockup2",{scale:2,x:-100,y:-75,autoAlpha: 0}, {scale:1,x: 0,y:0,autoAlpha: 1,duration:0.5});

tl.fromTo(".quadrato-screen-mockup3",{scale:2,x:50,y:75,autoAlpha: 0}, {scale:1,x: 0,y:0,autoAlpha: 1,duration:0.3});

tl.fromTo(".quadrato-screen-mockup4",{scale:2,x:25,y:5,autoAlpha: 0}, {scale:1,x: 0,y:0,autoAlpha: 1,duration:0.3});

tl.fromTo(".quadrato-screen-mockup5",{scale:3,x:-25,y:0,autoAlpha: 0,boxShadow:"6px 0 10px black"}, {scale:1,x: 0,y:0,autoAlpha: 1,duration:0.2,boxShadow:"0 0 .5px -5px black"});

tl.fromTo(".quadrato-screen-mockup8",{scale:3,x:-25,y:0,autoAlpha: 0,boxShadow:"-6px 0 10px black"}, {scale:1,x: 0,y:0,autoAlpha: 1,duration:0.2,boxShadow:"0 0 .5px -5px black"});

tl.fromTo(".quadrato-screen-mockup13",{scale:5,x:-0,y:0,autoAlpha: 0}, {scale:1,x: 0,y:0,autoAlpha: 1,duration:0.3,boxShadow:"0 0 10px -2px black"});

tl.fromTo(".quadrato-screen-mockup26",{y:50,autoAlpha: 0}, {duration: .5, y: 5,autoAlpha: 1,boxShadow:"0 0 10px -2px black"});

tl.set({}, {}, "+=2");
  }
  /*animazione iphone*/
  /*svg cerchi master*/
!function parall_home(){
  let cont_corsi_master = document.querySelector('.container-corsi-master');
  if (cont_corsi_master){
gsap.set('#svg', {autoAlpha:1})
const action = gsap.timeline({
  scrollTrigger: {
    trigger: cont_corsi_master,
    start: 'top center+=250', 
    end: 'bottom-=400',
    scrub: 0.3,
  },
  defaults:{duration:3, ease:'none'}
})
.from('#poly01', {attr:{points:"0,200 400,200 400,200 0,200 0,0"} },1)
.from('#poly03', {attr:{points:"0,200 400,200 400,200 0,200 0,0"} }, '+=1')
.to({}, {})
}
}();
  /*svg cerchi master*/
  /*scrabble text*/
let bloc_master = document.querySelector('#bloccomaster');
if(bloc_master){
let rotate_tx = gsap.timeline({ 
  defaults: { 
    duration: 2, 
    ease: "none"
  },
  scrollTrigger: {
    trigger: '#bloccomaster',
  start: 'top center+=270',
    //end: "max",
    end: 'bottom-=450',
    scrub: .3
  }
});

rotate_tx
  .to(".corso1", {
    duration: 3,
    scrambleText: {
      text: '{original}',
      chars: '{original}',
      revealDelay: 0.5,
      tweenLength: false,
    newClass: "large underline"
    }
  })

  .to(".corso2", {
    duration: 4,
    scrambleText: {
      text: '{original}',
    chars:'{original}',
      revealDelay: 0.5,
      tweenLength: false,
      speed: 0.7,
    newClass: "large underline"
    }
  })

  .to(".corso3", {
    scrambleText: {
    duration:5,
      text: '{original}',
      chars: '{original}',
      speed: 0.5,
      newClass: "large underline",
      revealDelay: 0.9,
      tweenLength: false
    }
  });
  } 
  /*scrabble text*/
  /*marquee home*/
let currentScroll = 0;
let isScrollingDown = true;
let accendiamo_motori = document.querySelector('.marquee');
if (accendiamo_motori){
let marq_txt = gsap.to(accendiamo_motori, {xPercent: -100, repeat: -1, duration: 65, ease: "linear"}).totalProgress(0.5);
  //test
let col_odd = gsap.to(".grid-block:not(:nth-child(3n-1))", {yPercent: -200, repeat: -1, duration: 20, ease: "linear"}).totalProgress(0.5);
let col_2 = gsap.to(".grid-block:nth-child(3n-1)", {yPercent: -200, repeat: -1, duration: 20, ease: "linear"}).totalProgress(0.5).timeScale(-1);
  //teest

gsap.set(".inner-marquee", {xPercent: -50});

window.addEventListener("scroll", function(){
  
  if ( window.pageYOffset > currentScroll ) {
    isScrollingDown = true;
  } else {
    isScrollingDown = false;
  }
   
  gsap.to(marq_txt, {
    timeScale: isScrollingDown ? 1 : -1
  });
    //cols
    gsap.to(col_2, {
    timeScale: isScrollingDown ? 1 : -1
  });
  
  gsap.to(col_odd, {
    timeScale: isScrollingDown ? -1 : 1
  });
  //cols
  
  currentScroll = window.pageYOffset
});
 }
  /*marquee*/
    /*rotazione testo*/
async function type_writer(){var e=["amano","usano","cercano","raccontano","condividono"];async function t(n){void 0===e[n]?setTimeout(function(){t(0)},2500):n<e[n].length&&async function e(t,i,o){if(i<t.length){let n=document.querySelector("#creiamo-fantastiche-esperienze-che-gli-utenti-amano .quality");n&&(n.innerHTML=t.substring(0,i+1)+'<span aria-hidden="true"></span>'),setTimeout(function(){e(t,i+1,o)},150)}else"function"==typeof o&&setTimeout(o,400)}(e[n],0,function(){t(n+1)})}t(0)}type_writer();
    /*rotazione testo*/
  
    
  };//home
 

  
}
_funzioni_home();

  /***su di noi***/
function _funzioni_su_di_noi(){
 if(body_class.contains("pagina-su-di-noi")){
   function img_grid() {
let griglia_ipads = document.querySelector('.contenitore-griglia-ipad');
if(griglia_ipads){
gsap.fromTo(griglia_ipads, {
  scale: 5,
   transformOrigin:"center",
  
}, {
  transformOrigin:"center 60%",
  scale: .3,
  stagger: .5,
  scrollTrigger: {
    trigger: griglia_ipads,
    start: "top 110%",
    end: () => innerHeight * 6,
    scrub: true,
  }
});
gsap.set(".contenuto-ipad:not(.centerBlock)", {autoAlpha: 1})
gsap.to(".contenuto-ipad:not(.centerBlock)", {duration: 0.1, autoAlpha: 1}, 0.001)

// Images to make it look better, not related to the effect
const size = Math.max(innerWidth, innerHeight);
gsap.set('.contenuto-ipad', {backgroundImage: i => `url(//picsum.photos/${size}/${size}?random=${i})`});

const bigImg = new Image;    
bigImg.addEventListener("load", function () {
  gsap.to(".centerPiece .contenuto-ipad", {autoAlpha: 1, duration: 0.5});
});
bigImg.src = `//picsum.photos/${size}/${size}?random=50`;
}
}
img_grid();
 }//su di noi
}
_funzioni_su_di_noi();
  /***su di noi*****/
   /*slide up */
async function _slide_up(){
      const contenitore_colonne_servizi = document.querySelectorAll('.contenitore-colonne-servizi');
  if (contenitore_colonne_servizi){
    for(let x of contenitore_colonne_servizi) {
    x.classList.toggle('down-slide');
  }
  }
 };
/* slide up */
/***single project***/
function _funzioni_servizi(){
 if(body_class.contains("single-project")){
   async function chiudi_modal_servizi(){  
setTimeout(()=> { Fancybox.close();}, 150);
setTimeout(()=> { _slide_up();}, 100);  
 };
chiudi_modal_servizi();
 /*scrolla in basso servizi*/
async function _scoll_servizi(){
  let content = `
  <style>
*{font-family:sans-serif}
  @-moz-keyframes scrollDown{0%{transform:translate3d(0,-32px,0)}50%{animation-timing-function:ease-out;transform:translate3d(0,0,0)}to{animation-timing-function:ease-in;transform:translate3d(0,65px,0)}}@-webkit-keyframes scrollDown{0%{transform:translate3d(0,-32px,0)}50%{animation-timing-function:ease-out;transform:translate3d(0,0,0)}to{animation-timing-function:ease-in;transform:translate3d(0,65px,0)}}@-o-keyframes scrollDown{0%{transform:translate3d(0,-32px,0)}50%{animation-timing-function:ease-out;transform:translate3d(0,0,0)}to{animation-timing-function:ease-in;transform:translate3d(0,65px,0)}}@keyframes scrollDown{0%{transform:translate3d(0,-32px,0)}50%{animation-timing-function:ease-out;transform:translate3d(0,0,0)}to{animation-timing-function:ease-in;transform:translate3d(0,65px,0)}}.scroll-down{bottom:5%;height:100px;left:0;margin:0 auto;position:absolute;right:0;text-align:center;z-index:1}.scroll-down-text{color:#d8d8d8;font-weight:700}.scroll-down-bar,.scroll-down-bar:before{display:inline-block;left:0;position:absolute;width:2px}.scroll-down-bar{background:#d8d8d8;bottom:0;height:65px;margin:0 auto;overflow:hidden;right:0}.scroll-down-bar:before{animation:scrollDown 1.5s infinite;background:#ab987a;content:"";height:35px;top:0;z-index:1}
  </style>
  <div class="scroll-down">
  <div class="scroll-down-text">SCORRI & SCOPRI</div>
  <div class="scroll-down-bar"></div></div>`;

let sottotitolo_servizio = document.querySelector('.hero-subtitle');
let scrolldown = document.createElement("div");
scrolldown.classList.add('scroll--discover');
if (sottotitolo_servizio){
 sottotitolo_servizio.insertAdjacentElement('afterend', scrolldown);
if (document.body.attachShadow) { 
    let shadow = scrolldown.attachShadow({
      mode: 'closed'
    });
    shadow.innerHTML = content; 
 
}};
}
_scoll_servizi();
   /*scrolla in basso servizi*/
   
 }
}
_funzioni_servizi();
/*** single project ***/

/*breadcrumbs fix*/
if(body_class.contains("single-customer")){let a=document.querySelector("#crumbs a:nth-of-type(2)");a.innerHTML="Clienti"}
else if(body_class.contains("single-project")){let a=document.querySelector("#crumbs a:nth-of-type(2)");a.innerHTML="Servizi";}
/*breadcrumbs fix*/

/***********************OLD STUFF******************************/
/***********************OLD STUFF******************************/

/*base fancybox single*/
async function fancy_single(){
/*audio mobile only*/
  if (window.matchMedia && window.matchMedia('(pointer:coarse)').matches) {
    function audio_click(){if("AudioContext"in window||"webkitAudioContext"in window){let t=function(e){let t=o.createBufferSource();t.buffer=e,t.connect(o.destination),t.start()},n="/assets/uploads/2021/11/ui_unlock_low.flac",o=new(window.AudioContext||window.webkitAudioContext);o.createGain().gain.value=1;let i,c=document.querySelector(".menu-toggle"),u=document.createElement("button");function e(){console.log("Menu");let e=o.createBuffer(1,1,22050),t=o.createBufferSource();t.buffer=e,t.connect(o.destination),t.start?t.start(0):t.noteOn(0),setTimeout((function(){t.playbackState!==t.PLAYING_STATE&&t.playbackState!==t.FINISHED_STATE||(u.style.display="none")}),0)}u.id="smuta",u.innerHTML="Smuta",document.body.appendChild(u),window.fetch(n).then((e=>e.arrayBuffer())).then((e=>o.decodeAudioData(e,(e=>{i=e}),(e=>console.error(e))))),c.onclick=function(){return t(i)},u.addEventListener("click",e),e()}}audio_click();}
  /*end audio*/
let opener_side_menu_desk = document.querySelector('.opener-side-menu')
  if (opener_side_menu_desk){
  opener_side_menu_desk.addEventListener('click', ()=>{
Fancybox.show([{ src: '#side-desktop', type: 'inline',closeButton:'outside',mainClass:'desk-side-fancybox-menu',template:{closeButton:'<div class="chiudi-fancy-menu magnetic">Chiudi <span class="x-chiudi-fancy-menu">&times;</span></div>'}}]);
  magnetic();
        });
}
let inner_a = document.querySelectorAll('#side-desktop a');
for ( let ciascuno of inner_a ) {
  ciascuno.addEventListener('click', ()=>{
    Fancybox.close();
  })
}
}
fancy_single();
/*async magnets*/
function magnetic(){
if (window.matchMedia && window.matchMedia("(pointer:fine)").matches) {

async function vertical_parallax_tab(){
let verttabs = document.querySelectorAll('.contenitore-form-2tabs')
if (verttabs){
verttabs.forEach( reveal => {
  let rvl = gsap.timeline({
     scrollTrigger:{
         trigger: '.group-contenitore-tabs-home',
         scrub: true
  }})
 
rvl.fromTo(reveal, 3,  {
  x:0,yPercent:20
}, {
  x:0,yPercent:-20,
});
})}}
vertical_parallax_tab();
  //vert2
/*magnetic elem*/
  let magnets = document.querySelectorAll('.magnetic');
  let strength = 50;
magnets.forEach( (magnet) => {
 magnet.addEventListener('mousemove', moveMagnet );
 magnet.addEventListener('mouseout', function(event) {
    gsap.to( event.currentTarget, 1, {x: 0, y: 0, ease: Power4.easeOut})
  } );
});

async function moveMagnet(event) {
  let magnetButton = event.currentTarget
  let bounding = magnetButton.getBoundingClientRect()
 gsap.to( magnetButton, 1, {
    x: ((( event.clientX - bounding.left)/magnetButton.offsetWidth) - 0.5) * strength,
    y: ((( event.clientY - bounding.top)/magnetButton.offsetHeight) - 0.5) * strength,
    ease: Power4.easeOut
  })}
    
  }
}
magnetic();

/*reveal fade in*/
async function mask_reveal(){
let reveals = document.querySelectorAll('.reveal')
if (reveals){
reveals.forEach( reveal => {
  let rvl = gsap.timeline({
     scrollTrigger:{
         trigger: reveal,
         start: "bottom bottom",
         end: "top top",
         scrub: true
  }})
 
rvl.fromTo(reveal, 3,  {
  autoAlpha: 0,
}, {
  '-webkit-mask-image': '-webkit-linear-gradient(-45deg, rgba(0,0,0,1) 100%,  rgba(0,0,0,1) 100%, rgba(0,0,0,0) 150%, rgba(0,0,0,0) 0%)',
  autoAlpha: 1,
});
})}}
mask_reveal();
/*reveal fade in*/


Thanks



 

Link to comment
Share on other sites

14 hours ago, elegantseagulls said:

Yes, if you're currently using transforms, but I'm guessing otherwise, as I wouldn't think transforms would cause this sort of repainting. could also consider animating each column instead of each image.

is not possible (yet) to target flex and grid columns :( or am I missing something?

Link to comment
Share on other sites

25 minutes ago, elegantseagulls said:

Not yet, you'd have to restructure your html for that.

Sounds like adding will-change: transform; to your cards may help fix the issue though.

Thanks. I added on my site but still got the crash :(

I did added a wrapper to each 1/3 of the items ( example 18/3 = 6) but seems I cant move the wrapper actually/properly.

I tried adding a display: contents to the wrapper, but this way totally broke the wrapper usability even via CSS, even via scrolltrigger.

See the Pen MWOwZdB by DedaloD (@DedaloD) on CodePen



Now I tried changing also the code and something is happening (even the animation is not as smooth and doesnt work well - but now it's just to find the right code) 

Link to comment
Share on other sites

Hi @Dennyno. You're welcome to ask any GSAP-specific questions in these forums, but unfortunately we don't have the resources to offer free general consulting services for logic/rendering/CSS or doing performance audits. Please read the forum guidelines. If you still need some help, you can definitely post in the "Jobs & Freelance" forum and see if you can hire someone. Or contact us directly if you'd like to explore paid GreenSock consulting services. 

 

Good luck with the project!

  • Like 1
Link to comment
Share on other sites

14 hours ago, GreenSock said:

Hi @Dennyno. You're welcome to ask any GSAP-specific questions in these forums, but unfortunately we don't have the resources to offer free general consulting services for logic/rendering/CSS or doing performance audits. Please read the forum guidelines. If you still need some help, you can definitely post in the "Jobs & Freelance" forum and see if you can hire someone. Or contact us directly if you'd like to explore paid GreenSock consulting services. 

 

Good luck with the project!


@GreenSock thanks Jack :) 
Solved

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...