Kameleonic

@Rodrigo Hi buddy, thanks for your kind words and guidance, I'm sure I will find myself needing to lurk the forums in the near future, this apps gonna be a bit one and we are wanting to utilise GSAP where we can. Kind Regards Jacob Statham

This is how we managed to fix the issue, We was declaring some things wrong and to be fair using TypeScript & Vue made it a massive headache, but I hope this helps someone out who has a similar issue with IONIC framework to develop a mobile app. Kind Regards. Jacob Statham

//Import GreenStock Animation Platform import gsap from "gsap" import ScrollTrigger from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollTrigger) // Mounted Lifecycle Hooks async mounted() { // Setup the strapline tween. this.tween = gsap.from(this.$refs.strapline, { scale: 0.5, yPercent: 40, repeat: 0, duration: 2, ease: "linear", }).totalProgress(0.5); // Run the animation for the strapline this.scrollAnimationStrapline(); }, data() { return { currentScroll: 0, isScrollingDown: true, tween: null, } }, // Methods methods: { // Scroll animation for the strapline. scrollAnimationStrapline() { gsap.to(this.$refs.strapline, { xPercent: 0, scrollTrigger: { trigger: this.$refs.trigger, start: "top center", // scroller: '.content-scroll', scrub: true, markers: true, } }); }, // Handle the scrolling event handleScroll(event: any) { console.log('Triggered scrolling event'); console.log(event.detail.scrollTop, this.currentScroll); // Set the current scroll position. if (event.detail.scrollTop > this.currentScroll) { this.isScrollingDown = true; } else { this.isScrollingDown = false; } // Set the time scale of the strapline tween gsap.to(this.tween, { timeScale: this.isScrollingDown ? -1 : 1 }); // Set the current scroll position. this.currentScroll = event.detail.scrollTop; } }

I can get the scroll-start marker to stop still on the page but the 'Start' marker also stays still so the trigger never passes the action if you get what I mean.

Morning guys, I have a complex problem while using IONIC Mobile app framework, The app is running VueJS and utilizing TypeScript. I have implemented GSAP and ScrollTrigger, just for a test subject I wish to rotate the top card based on the scroll position. It functions somewhat but not as expected (I have used GSAP in other frameworks, PHP, Laravel etc...) The main issue is that its looks as though the card isnt rotating until you change the size of the viewport then it updates the styling as expected and rotates the top card (screenshots show markers) \ AsI slide the responsive screen sizer in chromes inspect the markers update when i release the mouse click and the rotation updates.