mateuszjanbilko

e sqewY works, actually with the rotationZ it was working too... but the background image itself gets some padding in the beginning and jumps... while desktop works just fine... <!-- black anim phone --> <div ref="blackanim" class="m-0 p-0 bg-yellow-100 overflow-hidden align-end flex relative h-screen w-full" > <div ref="imageblackpone" class="fixed m-0 p-0 w-full h-full bg-blackanim bg-cover" > <div ref="gelb" class="inset-y-0 w-1/2 right-0 text-4xl flex flex-col absolute top-0 justify-center md:text-2xl" > <div class="z-2"> <h4 class="text-xl md:text-4xl" style="color: #f7c705;"> {{ $t('working_class') }} </h4> <p class="text-white text-xl"> {{ $t('upto') }} <br /> {{ $t('kg') }} </p> </div> <svg ref="plate" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 325.92 234.96" > <defs> <style> .cls-1, .cls-3, .cls-2, .cls-5 { fill: none; } .cls-1, .cls-3 { stroke: #6ec6d9; } .cls-4 { fill: #1d1d1b; } .cls-4, .cls-5 { font-size: 27.47px; } .cls-5 { stroke: #f7c701; } </style> </defs> <g id="Ebene_2" data-name="Ebene 2"> <g id="Ebene_1-2" data-name="Ebene 1"> <path class="cls-1" d="M287.6,37.24h-221L37.42,66.4l-.3-.3V171.88L63,197.76H287.6a1.27,1.27,0,0,0,1.28-1.27v-158A1.27,1.27,0,0,0,287.6,37.24Z" /> <g ref="clsall" id="Ebene_3" data-name="Ebene 3"> <line ref="cls3" class="cls-3" x1="273.96" y1="146.53" x2="82.18" y2="146.53" /> <line ref="cls3" class="cls-2" x1="273.96" y1="146.53" x2="82.18" y2="146.53" /> <line ref="cls2" class="cls-2" x1="113.64" y1="61.96" x2="113.64" y2="173.87" /> <line ref="cls2" class="cls-3" x1="113.64" y1="61.96" x2="113.64" y2="173.87" /> </g> <g id="Ebene_4" data-name="Ebene 4"> <text ref="cls5" class="cls-5" transform="translate(143.55 114.34) scale(0.88 1)" > 120 x 80 </text> </g> </g> </g> </svg> </div> </div> </div> <!-- black anim end --> <div class="relative"> <div class="relative transform origin-bottom-left -skew-y-3 bg-black p-5 text-white text-left z-10" ref="brake" > <h2 class="text-xl md:text-4xl">{{ $t('seewhat') }}</h2> </div> </div> do you think ist because, its a backgroundimage?

Hi Greg! yes, it was meant to be delay... i was hoping that specifying it in "time" helps. Thanks alot for your answer! now i try with skewY, and locally it works. ill let you know and paste some snippet for others in case it works.

Hallo! im geting problem when i animate on scroll rotation of the svg(problems are only on live site - locally everzthing works perfect), when i coment out the rotation code scrollTrigger works as desired - but with no roration:) Here is my mounted so that you can see what im i faceing here:) mounted() { gsap.registerPlugin(ScrollTrigger) gsap.from(this.$refs['textGirlAnim'].children, { autoAlpha: 0, x: -140, stagger: 0.3, duration: 1.5, scrollTrigger: { trigger: this.$refs['girl-section'], start: 'top bottom-=200', toggleActions: 'restart pause resume pause', }, }) gsap.from(this.$refs['image-section'].children, { autoAlpha: 0, x: -140, stagger: 0.3, duration: 1.5, scrollTrigger: { trigger: this.$refs['image-section'], start: 'top bottom-=200', toggleActions: 'restart pause resume pause', }, }) gsap.set('.cardWrapper', { perspective: 800 }) gsap.set('.card', { transformStyle: 'preserve-3d' }) gsap.set('.back', { rotationY: -180, opacity: 1 }) gsap.set(['.back', '.front'], { backfaceVisibility: 'hidden' }) ScrollTrigger.matchMedia({ // desktop '(min-width: 601px)': () => { let tl = gsap.timeline({ scrollTrigger: { trigger: this.$refs['blackanim'], start: 'center center', end: '+=500px', pin: true, pinSpacing: true, }, }) tl.from( this.$refs.plate, { css: { autoAlpha: 0, rotationY: -26, rotationX: 72, rotationZ: 5, }, }, 2, ).to( this.$refs.gelb, { transformOrigin: 'center', scale: 1, xPercent: -30, }, 1, ) }, // small screen '(max-width: 600px)': () => { let tl = gsap.timeline({ scrollTrigger: { trigger: this.$refs.blackanim, start: 'center center', scrub: true, pin: true, pinSpacing: true, }, }) gsap.set(this.$refs.plate, { xPercent: -35, scale: 0.6, autoAlpha: 0, css: { rotationY: -26, rotationX: 72, rotationZ: 5, }, }) gsap.set(this.$refs.imageblackpone, { width: '300%', xPercent: -5, }) // tl.from(this.$refs.plate, { // css: { // xPercent: -110, // autoAlpha: 0, // rotationY: -26, // rotationX: 72, // rotationZ: 5, // }, // }) tl.to(this.$refs.gelb, { scale: 1.2, xPercent: -70, yPercent: 15, }) tl.from(this.$refs['imageblackpone'], { width: '300%', xPercent: -45, }) // tl.from( // this.$refs['clsall'], // { // transformOrigin: 'center center', // opacity: 0, // scaleX: 0, // scaleY: 0, // }, // 2.5, // ) // tl.from(this.$refs['clsall'], { // transformOrigin: 'center center', // autoAlpha: 0, // scaleX: 0, // scaleY: 0, // }) }, }) if (process.client) { let width = window.innerWidth if (width < 600) { this.mobile = true } else { this.mobile = false } } ///Scroll black begin }, Does anyone of you had problem with it too? I also not sure if its correct syntax to define css properties inside of a timeline like this, and i couldnt find anything in the docks. tl.from( this.$refs.plate, { css: { autoAlpha: 0, rotationY: -26, rotationX: 72, rotationZ: 5, }, }, 2, ) If anyone can give me a little hint, id be grateful:) peace!

Hallo Forum! Im doing something similar(but in nuxt), i actually do @Carl course just trying to do everything in nuxt. and just got this error. so i wonder how to get out of this without turning back to nuxt? if anyone had a similar experience, id be grateful for any ideas:!) happy tweening! <template> <div> <div class="hero">Scroll Down</div> <div ref="ban" class="ban banner"> <div ref="background" class="background miata"></div> <div class="foreground"> <h1>1995 Mazda Miata</h1> <h2>10k miles</h2> </div> </div> <div class="content"> <p> Nullam lobortis tincidunt orci, id ultricies mauris consectetur sit amet. Nulla at enim augue. Nam quam velit, efficitur vestibulum justo iaculis, rutrum posuere sem. Orci varius natoque penatibus et magnis dis parturient montes </p> </div> <div class="banner" ref="ban"> <div class="background cayman"></div> <div class="foreground"> <h1>2006 Porsche Cayman S</h1> <h2>33k miles</h2> </div> </div> <div class="content"> <p> Nullam lobortis tincidunt orci, id ultricies mauris consectetur sit amet. Nulla at enim augue. Nam quam velit, efficitur vestibulum justo iaculis, rutrum posuere sem. Orci varius natoque penatibus et magnis dis parturient montes </p> </div> </div> </template> <script> import gsap from 'gsap/all' import { ScrollTrigger } from 'gsap/all' export default { data() { return {} }, mounted() { gsap.registerPlugin(ScrollTrigger) this.animation() }, methods: { animation() { const q = gsap.utils.selector('.banner') // const background = q('.background') // const headings = q('h1, h2 ') q('.banner').forEach((banner) => { let tl = gsap.timeline({ ScrollTrigger: { trigger: banner, start: 'top 90%', toggleActions: 'play none none reverse', }, }) tl.from(background, { backgroundPosition: '60% 0%', filter: 'brightness(0.1)', duration: 1, }).from(headings, { y: 200, stagger: 0.1 }, 0) }) }, }, } </script>

i got it installed now... i dont know why it didnt work erlier:/ sorry

Hallo Everybody! im learning gsap with nuxt and now im trying to do locomotivscroll with scroll triger... and when i do everything like you above... i get this locomotive-scroll.esm.js?fbd6:1661 Uncaught TypeError: Cannot read property 'match' of undefined at getTranslate (locomotive-scroll.esm.js?fbd6:1661) at eval (locomotive-scroll.esm.js?fbd6:2296) at Array.forEach (<anonymous>) at _default.addSections (locomotive-scroll.esm.js?fbd6:2295) at _default.update (locomotive-scroll.esm.js?fbd6:2509) at _default.resize (locomotive-scroll.esm.js?fbd6:2054) at eval (locomotive-scroll.esm.js?fbd6:251) so i thought... it must be plugin? i checked my version and it says... 2.1.3 locomotiv expects higher so i installed gsap from npm. this is what i see in dependencies( see pic) and my question is... can it be the reason why it doesnt work? thx for reading!!