Search the Community
Showing results for 'airpods' in content posted in GSAP.
Found 9 results
-
Hi Guys This is more of a general hosting question, and not so much necessarily a GSAP specific question. We built a site based on the GSAP Airpods Pro scroll sample. Our site however loads around 900 frames, and not 147 like the Airpods example. Now the problem. We tested on 2 different hosting providers. The one provider, loads the files just fine, but the other comes up with a bunch of 508 and 404 errors, even though the files are there. In contacting the hosting provider support, they say there is nothing they can do as their servers are setup with brute force attack protection. Essentially when loading the site, its pulling so many resources that the server thinks its being attacked, and then blocks the requests, resulting in only half the site loading. This is specific to a single hosting provider, and as I say, a different hosting provider does not have this probem at all. Unfortunately the provider that works fine, is not in UK, and we would need one based in the UK. Any recommendations or general advice? -
Hello fellow developers, I started looking into the ScrollTrigger plugin as it seems very interesting, and while looking on the GSAP's codepen profile for different project ideas, I found this nice airpods animation. After looking into the code I figured out how 80% of it works but I still have some questions. Firstly, how does the "airpods" variable work? It obviously increments after each frame but I don't seem to find out where exactly it does that. Also, it uses the function gsap.to(airpods, {....}) which doesn't make much sense as "airpods" doesn't look like a proper html element. Fruthermore, I can't figure out why Inside the gsap.to function there is "frame: frameCount - 1", as the "frame" property doesn't appear on the docs at all. Secondly (this is more of a curiosity of mine), on the official apple website it also presents some features of the airpods while running the scroll triggered animation on the background. I was just wondering how would that be possible given the fact that the animation on the codepen acts like a fixed html canvas, so it would be a pain to display any other kind of media on the website. Thanks for reading all the way, even though some questions might not make any sense at all. Any help is appreciated.
-
Hi and yes another airpods question (sorry)! The animation is running fine on desktop and also iphone. but on my ipad the animation is not smooth at all. the main difference is that I pinned the canvas. const canvas = document.getElementById(hero); const context = canvas.getContext("2d"); canvas.width = 1920; canvas.height = 1080; let startTop = 75; let frameCount = 33; const currentFrame = index => ( `images/content/anim/hero/gate_${(index + 1).toString().padStart(3, '0')}.jpg` ); const images = [] const thegate = { frame: 0 }; for (let i = 0; i < frameCount; i++) { const img = new Image(); img.src = currentFrame(i); images.push(img); } gsap.to(thegate, { frame: frameCount - 1, snap: "frame", ease: "none", duration:"3", scrollTrigger: { scrub: true, pin:$("."+herocontainer), pinSpacing:true, start:"top "+startTop+"px", }, onUpdate: render // use animation onUpdate instead of scrollTrigger's onUpdate }); images[0].onload = render; function render() { context.clearRect(0, 0, canvas.width, canvas.height); context.drawImage(images[thegate.frame], 0, 0); } hope you have any idea how to improve the ipad performance. thx! ToM
-
I'm trying to recreate Apple's Airpods Pro presentation page with ScrollTrigger. This is what I'm trying to make: https://codepen.io/j-v-w/pen/ZEbGzyv My idea is to use an array which holds all the images and then make use of ScrollTrigger.update() to update the img src based on the scrolling position.
-
I am trying to create scroll animation using scrollTrigger plugin on my Next.js, but I'm getting error "cannot read property "_gsap" of undefined, etc. I have a spritesheet of 50 images (1.5 MB), that would be providing the scroll images. I have looked at these two, which was helpful, but only it doesn't translate very well into use for Next.js. Help would be appreciated. import Link from 'next/link' import Head from 'next/head' import Image from 'next/image' import {useEffect, useRef, useState} from 'react' import styles from '../styles/Home.module.css' import {gsap} from 'gsap' import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; const Home = () => { const imageViewer = useRef(null) const imageScene = useRef(null) console.log('imageID', imageViewer) // if (process.client) { // } gsap.registerPlugin(ScrollTrigger) let frame_count = 9 let offset_value = 100 gsap.to(imageViewer.current, { // backgroundPosition: (-offset_value * frame_count * 2) + "px 50%", // ease: "steps(" + frame_count + ")", // use a stepped ease for the sprite sheet scrollTrigger: { trigger: imageScene.current, start: "top top", end: "+=" + (frame_count * offset_value), pin: true, scrub: true } }) return ( <> <Head> <title>TalkingSkunk | Home</title> <meta name='keywords' content='talkingskunk' /> <link rel="icon" href="/favicon.ico" /> {/* <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script> */} </Head> {/* <div className={styles.bgWrap}> <Image src="/home.png" className='cityscape' data-speed="0.2" layout="fill" objectFit="cover" quality={100} /> </div> */} <div className={`${styles.header} ${styles.section}`}> <div className={styles.center}>↓START</div> </div> <p className={styles.bgText}> Discover </p> <div ref={imageScene} className={`${styles.scene} ${styles.section}`} id="sticky"> <div ref={imageViewer} className={styles.viewer}></div> </div> <div className={styles.section}> <div className={styles.center}>End</div> </div> <div className={styles.canvas}> </div> <div className={styles.body}> </div> </> ) } export default Home;
-
I am just trying to understand the concept of how to achieve apple the scroll animation. My problem is that I don't understand how the transition from one scene to the new scene works. Apple Animation As soon as the first scene is completely done with the animation, the next scene jumps in without having the scroll effect of the second scene. How do I achieve this transition in GSAP? Thanks a lot
-
Hi all, I'm wondering why my timeline isn't behaving like a normal timeline in this example. As in: the h1 title animates immediately and doesn't wait for the previous animation to finish. I'm also wondering if it would be possible to animate a second canvas after all this and if that would be advisable (performance wise). Thanks in advance!
-
Hello, i'm trying to do build the same video/image sequence style of the Airpods website and also add text. I googled and found this awesome codepen posted in the GSAP forum (see end of post): I'd like to have something like this codepen (scroll after panel 5) : https://codepen.io/GenSock/pen/bGexQpq?editors=0010 But I really don't know how I can do something like this (add a sort of duration maybe ? Or even "scroll-out" when there is no text left to show ?) Here is an example when I try to simply add another div (see screenshot) : you can see that the canvas is still "playing" (the scroll duration comes from the window height not the canvas height/parent height), and also that is goes way beyond the div. So, my question is: how can I make it so it does not goes beyond the div, and that the canvas duration is related to the div size (after div, the canvas is not changing). Also, I'm doing my website with React, and found this npm package : https://www.npmjs.com/package/react-gsap Do you recommend to use it, or should I stick with "basic" gsap ? Thank you .
-
Hi, I'm new to Greensock and think it's absolutely fantastic! I'm trying to do something similar to Apple Airpods which was based on this post: https://greensock.com/forums/topic/25188-airpods-image-sequence-animation-using-scrolltrigger/ The idea is I want several products on one page and as you scroll down it loops through the images the same as Airpods and displays some text. It works fine for one product but when I add a second it overlays them on top - I'm presuming as I'm using position fixed - but I'm wondering why they are triggering at the same time and not after each other? I know I have messed something up quite badly and wondered if anyone knew what? Thanks! Chris
