handred0008

thanks akapowl ! that is a clear description ?

Hi there! I forked the official example and make this codepen demo there are two color boxes in a pinned scene(background image) the problem is I can't figure out the position of start point (how it work) pink box works as I expected //this is pink box ScrollTrigger.create({ trigger: ".massiveImage", start: "-50px top", end: () => innerWidth * 3, scrub: true, markers: {startColor: "pink"}, animation: pinkTl }); .massiveImage positionY - 50px hit viewport top but I have no idea what happened on blue box //this is blue box ScrollTrigger.create({ trigger: ".massiveImage", start: "50px top", end: () => innerWidth * 3, scrub: true, markers: {startColor: "skyblue"}, animation: blueTl }); what I expect is .massiveImage positionY + 50px hit viewport top look like this: but start point of blue is at a wired position (you can check the demo , I turn on the markers) is there anyone could explain what happened on this demo? and how should I achieve effect like image above ?

@GreenSock thanks guys ! I follow your suggestion, and updated the demo : I create scrollTrigger after all html/image render finish, and it worked porperly but I still use setTimeout because I can not get proper height right after scrollTrigger created you can read my last post above that explain my code doing. thanks for support ❤️

@GreenSock thanks for reply I using setTimeout because I can not get proper height of DOM right after scrollTrigger created here is the core code ( initAnimation ) doing: step 1: create text scrollTrigger (pinned) step 2: create image animation scrollTrigger in above example there two item in itemList, so start point will be (index / 2) * containerHeight pixel (from top of container) but I get 0 (container height) right after step 1, you can see console output in my demo phew. maybe there are better solution to get this effect (google art exhibition) ----- could you provide any example ? About the Vue and axios doing is just create html template easily Anyway I'll make another demo without these tools later thanks for your support so much❤️

@akapowl thanks for your reply I test the demo, but nothing seems to have changed And you mention about viewport-height, so I update my demo using fixed height value :style="{height: `${screen.height}px`}" // get window.innerHeight once screen: { width: window.innerWidth, height: window.innerHeight, } but problems still occured.. btw, I notice that reloading page can reduce the chance of bug happen (but still can be triggered via resize event) just wonder that is this GSAP's bug, or I using plugin in wrong way ? thanks again anyway ❤️

hello everyone, sorry for my poor english first. I want my project look like google art exhibition, so I use Vue and GSAP to make this demo it work perfectly on pc, but something wired occured on mobile device (try codepen debug mode on your phone) video of wired occured on mobile the core code in codepen demo is initAnimation() initAnimation(){ const vm = this; const blockId = vm.blockData.blockId; const tl = gsap.timeline({defaults:{ duration: 1}}); const $container = vm.$refs.container; const $img = vm.$refs.image; const posData = []; vm.blockData.itemList.forEach(function(item){ let x = item.x; let y = item.y; posData.push({ x:`${x}%`, y:`${y}%`, scale: item.scale, }); tl.add([ tl.to(`#immersive${blockId}-${item.itemId}`, { opacity: 1, y: "-10%" }), tl.to(`#immersive${blockId}-${item.itemId}`, { opacity: 1, y: "-10%", duration: 5}), tl.to(`#immersive${blockId}-${item.itemId}`, { opacity: 0, y: "10%" }), ]) }) // set text animation ScrollTrigger.create({ animation: tl, trigger: $container, start: "top top", end: `+=${vm.blockData.itemList.length * 1500}`, scrub: true, pin: true, anticipatePin: 1, // markers: true, }) // set image animation // delay to get real container height above setTimeout(function(){ const realHeight = $container.parentNode.offsetHeight - $container.offsetHeight; posData.forEach((pos,index)=>{ if(index === 0) return; const thisFromTo = gsap.fromTo($img,posData[index-1],{...pos,duration: 1}); ScrollTrigger.create({ animation: thisFromTo, trigger: $container.parentNode, toggleActions: 'play none none reverse', // set trigger point (according container height) start: `${(index / posData.length)* realHeight}px`, end: '+=20', anticipatePin: 1, // markers: true }) }) gsap.set($img,posData[0]); },500) } data structure of one block container look like this, here is all data { "blockId": 1044, "itemList": [ { "itemId": 3149, "url": "https://images.unsplash.com/photo-1603486001734-7d92cedd1d33?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ", "description": "lorem lorem lorem", "x": -25, "y": 3, "scale": 1 }, { "itemId": 5568, "url": "https://images.unsplash.com/photo-1603486001734-7d92cedd1d33?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ", "description": "lorem2 lorem2 lorem2", "x": 6, "y": -12, "scale": 1 } ] }, I notice this situation seems only happened while having many scrollTrigger on page (or not) and also occured when window.resize event fired (mobile address bar show/hide while scrolling) Any suggestion to fix this, or better way to achieve this effect ? (google art exhibition) Thanks you for reading here