Search the Community
Showing results for tags 'backgroundcolor'.
Found 6 results
-
Hi all, I'm building a section for a website with separate ScrollTriggers for desktop and mobile. The desktop one is a split screen with two columns, the left having a pinned image container with cycling images and the right column with scrolling text. In the mobile version the items are set up as panels, scrolling on top of each other. I have two problems and can't figure it out. in the desktop version, when the new trigger is fired, the background color is animating, but it shortly resets to the body color in the mobile version (<600px) it works well, since I could set the background color on the panel in the forEach loop instead of the larger section color. Here the problem is that after the fourth item, the pinSpacing:false that I set on the ScrollTrigger makes the content after the trigger, so the next section on the page, fall behind the last panel. I can't set pinSpacing to true, since then the panel animation won't work anymore. I tried to look these things on the forum but couldn't find the solution, sorry. Hope you can set my off on the right path, appreciate the help. -
ScrollTrigger background color change animation not working well on Safari
Kanalaetxebarria posted a topic in GSAP
Hello, I'm trying to make an animation that switches the viewport's background color depending on your scrolling position. The animation works great on Chrome and on FireFox, but Safari just looks bad, very laggy and the colors don't transition into the page, but rather just pop up with a delay. Here is my animation code (I am using Vue.js) backgroundAnimation() { let $projects = gsap.utils.toArray(this.htmlID + " .project-wrapper"); let projectListTl = gsap.timeline({ scrollTrigger: { trigger: this.htmlID, start: "top center", end: "bottom center", ease: "none", scrub: true, markers: false, onLeave: ({ progress, direction, isActive }) => document.documentElement.style.setProperty("--background", "white"), }, }); $projects.forEach(($project, i) => { projectListTl.to("html", { duration: 0.1, "--background": $project.dataset.projectColor, }); projectListTl.to("html", { delay: 0.3, duration: 0.2, "--background": "transparent", }); }); }, (The method above runs when there is an update on the component) updated: function () { this.$nextTick(function () { this.backgroundAnimation(); const self = this; ScrollTrigger.matchMedia({ "(min-width: 1024px)": function () { self.scrollAnimation(); }, }); }); }, Any ideas? Not sure where to start looking even. Thanks! -
Hello! I have this prototype I am working on that I forked from another forum post and tweaked a bit. What I can't seem to figure out is how to make it so the background color animates to a new one for each section. I have a "data-color" attribute on each ".Demo-section" so ideally it would use that value for each section. Basically I'd like it to start with #fff. Animate from #fff to #ddd when second Demo-section comes in Animate from #ddd to #999 when third Demo-section comes in Any help/guidance would be very much appreciated. ?
-
i think i have to do something similar like this(Looped "scrolling" section) or this this(the red panel animation) to achieve the background effect. i dont know how to implement though can you guys help? check out this video i am talking about this
-
How to seamless change background color with gradient between section
kevchcm posted a topic in GSAP
Hello, I'm working with scrolltrigger and I'm trying to create a background color from white to blue when the users scrolls. The problem is that I want that transition to be very smooth but the results I have it's that the blue color appears once the trigger starts. This website show an example of what I am trying to do https://demosnappy.webflow.io/product Here is a video as well Screen Recording 2020-12-03 at 9.16.57.mov -
disclaimer: Long time user of GreenSock (back to the days of gs in Flash), and this is a new account. Is it possible to get the actual hex value rendered on each tick of an animation to pass along as params via onUpdate? An example of grand prize winning answer: var prop = {bgColor: "#00ffff"} TweenMax.to(prop, 0.5, {bgColor: "#000", onUpdate: renderHex, onUpdateParams: ["{self}"]}) function renderHex(tween) { console.log(tween.target.bgColor); //show me "#0000ff", "#00000f", ect ect until the transformation is complete // currently returns NaN with expected response } As always, any direction is greatly appreciated and any conversion of expectations (convert hex to something that can be tracked) is welcomed!
