Search the Community
Showing results for tags 'backgroundcolor'.
Found 5 results
-
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
-
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!
