Search the Community
Showing results for 'airpods' in content posted in GSAP.
Found 94 results
-
Hey guys ! I wanted to build a component where when we scroll text fades out and new text fades in .I am able to do this for two elements but I dont seem to understand when we have to apply the animation for the second text to fade out and a third text to fade in .(an example would be like in apple airpods website where new text fades in and out when we scrolll).I hope I get some help! This is what I have so far ,I actually saw this code in youtube and edited it! I just want the hi also to dissappear when we scroll and new text say something else also appear!
-
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;
-
first of all thanks @BrianCross. what about when we add another text? actually the text transitions on apple's airpods pro website exactly what I want
-
Canvas, blobs and bears oh my!! Ok maybe not bears, but sprites didn't fit with the Wizard of Oz theme I was going for ? I have a 13s video that I want to play when the page loads. After it's played, onScroll I want it to replay to 50%, then stop. Basically, the video is a head rotating 360 in 3d space, at 50% it faces right, which is where I want to place my 2nd lot of content. I've searched the forums and found loads of interesting stuff involving airpods, canvas, scrolling sprites, image sequences and even something to do with 'blobs' in videos. Most of it's beyond me, but I'm happy to delve in - I'm just not sure where to focus my search. Can anyone tell me if what I've described is possible and if so, what would be the best way to go about it? Video seems the likeliest and smoothest option, as only play/pause need to be controlled, plus 13s*30fps seems a bit unwieldy, but I could be wrong... Any thoughts would be gratefully appreciated!!
-
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
-
@ZachSaucier Hi there! I fixed my code using ScrollTrigger and Timeline, looking at your AirPods example, and I managed to get It working, the canvas .png sequence works and responds to the scrolling position. Still a few things I can't get my head around, I'll post the correct codepen down here so that hopefully it can help. https://codepen.io/jlnsrtr_/pen/PoGdNLE I've set pin to true, but the animation itself won't pin, this keeps me from going further to try and add another animation to the timeline, a simple div fading in and overlapping to the pinned png animation. Of course it's my lack of js knowledge blocking me here and I bet the solution will be the most obvious thing but I'm really stuck at this point!
-
Thanks a lot! Thats actually really close to what I'm trying to do, having a scroll animation on the background with other divs overlapping it, what basically happens with the text parts on the AirPods animation. I'm taking a look at the source code so that I can see what's different to mine "cutting and sewing" for the final result, I'll keep you updated. But really that example was spot-on what I was looking for!
-
AirPods image sequence animation using ScrollTrigger
ZachSaucier replied to marius96's topic in GSAP
In the demo look at the tween that affects the airpods object's frame value. That's what's controlling which image is being shown. Instead of using a single tween for that animation, you likely want to replace it with a timeline of different tweens to give you more control. -
Hey @ZachSaucier, I am using your example from above (canvas + keyframes) and I would like to know how you would enhance the code to pause the keyframe animation on specific keyframes while the text is displayed and then continue playing the animation? Apple is doing this on their AirPods Pro site right here (see screenshot for exact section): Pausing Animation on Apple Website I would be very glad for any input on how to achieve this effect.
-
Hi there! I'm trying to create a page like Airpods of apple. I'm starting from the codepen provided inside the ScrollTrigger documentation. I would like to "freeze" some specific frame for a couple of seconds while scrolling (for example, the 10th frame for a couple of seconds), in order to have time to make some text caption enter on screen on that particolar point. One solution could be to duplicate the same frame multiple times, but I would drasticaly increase the size of tha page. Could you help me find a better solution? Thank you!!
-
Hello, I am trying to achieve a scroll scrubbing animation. Basically I want to pin the canvas element and play the canvas animation. I have achieved the animation using windows mousewheel event but I would like to know how to set it up using scroll trigger pin property and play the requested 234 frames in sync. The idea was inspired from apple iPod page. https://www.apple.com/airpods-pro/. Thanks.
-
Changing the image source isn't a good idea. It takes 1 line of canvas code to draw an image in canvas. function render() { context.drawImage(images[airpods.frame], 0, 0); } If the images have a transparent background, then it would be only 2 lines. function render() { context.clearRect(0, 0, canvas.width, canvas.height); context.drawImage(images[airpods.frame], 0, 0); } https://codepen.io/osublake/pen/2152a28cffe2c2c0cca8a3e47f7b21c6
-
Sprite animation sequence with New ScrollTrigger
ZachSaucier replied to Simone Bertoloni's topic in GSAP
People viewing this thread my want to read about how I approached this sort of situation in an actual client project that was similar to the AirPods site: -
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.
-
Hi Zach, Decided to try and optimise my scroll animation by using the example of the Apple AirPods instead of the bloated javascript from Animate. I am running into a couple of problems: 1. if you scroll up and push it at the top I get error messages because it is looking for image files with a negative number - 00-1.jpg etc. 2. I cannot set the scroll height correctly - it unpins and starts scrolling up half way through the animation. 3. I would like to use ScrollTrigger to control this but unsure where to start. 4. I am getting warnings in Safari: 'This web page is using significant energy. Closing it may improve...etc.' Could this be the multiple event listeners in the code? https://codepen.io/sbest58/pen/vYLMYPo Cheers Steve
-
Sprite animation sequence with New ScrollTrigger
Simone Bertoloni replied to Simone Bertoloni's topic in GSAP
Hi Jack, could you instead show me how you would do the same animation using multiple separate images instead of a single sprite image? Do you have any solution to better manage the uploading of images and the waiting time? In this codepen for example 148 separate images are used: https://codepen.io/j-v-w/pen/ZEbGzyv Single image link: https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/0001.jpg Thanks for your help. -
Does anyone know how to fade a text in and out again using the ScrollTrigger Plugin? Like the Apple Airpods Pro Product Page: https://www.apple.com/airpods-pro/ On Scroll the Text slides up and simultaneously fades in. If we scroll further the text fades out und the next text fades in. I've found a similar pen but the section only fades out. Thank you for your help!
-
Hi everyone, I would like to reproduce the Apple AirPods effect of this pen with ScrollTrigger: https://codepen.io/j-v-w/pen/ZEbGzyv Here is an example made with scrollMagic: https://webdesign.tutsplus.com/tutorials/how-to-animate-a-coffee-drinking-sprite-with-scrollmagic--cms-24795 Can you help me join these Pen by using the new scrollTrigger Plugin? Thanks so much
-
Sticky elements in the 'Full-Screen Slider' by PointC?
kristoffer replied to kristoffer's topic in GSAP
For the scroll behavior i was actually hoping for a more traditional approach than the Accord website. Like the Apple Airpod website https://www.apple.com/airpods-pro/ except with a scroll that snaps to each page. The idea is to have the engine animation as video or lottie. GSAP will be used for text animation, kind of how it is done on the Accord website.
.thumb.jpg.45ad1f0654d8c8cd759c47599fe1796d.jpg)
