Animating SVG Icons? UI Animations with ShapeShifter! (Tutorial)

แชร์
ฝัง
  • เผยแพร่เมื่อ 30 ต.ค. 2024

ความคิดเห็น • 174

  • @DesignCourse
    @DesignCourse  6 ปีที่แล้ว +28

    I need you to do a couple things. (1) Subscribe if you haven't, and (2) Give me a comment, even if it's to tell me that I'm horrible (on second thought, nevermind, be quiet!)

    • @weshuiz1325
      @weshuiz1325 6 ปีที่แล้ว

      review material.io plz

    • @Holycrabbe
      @Holycrabbe 6 ปีที่แล้ว

      watched this video: worked with SQL for some months, then watched it again - can really be recommended

    • @IamEyalMarcosLevit
      @IamEyalMarcosLevit 5 ปีที่แล้ว

      Hi, thx for tut. You know you can just wrap the svg element with an element and link it to whatever you want instead of using javascript. I really recommend you use as little javascript as you can, because this is where svg's power really is.

    • @abhishekrprasad
      @abhishekrprasad 5 ปีที่แล้ว

      @@IamEyalMarcosLevit can you please elaborate on how it is done, to get the same effect as in the tutorial by adding an , thanks in advance

    • @mansaha9288
      @mansaha9288 5 ปีที่แล้ว

      you should use inkscape and 7zip, but nvm

  • @aravindmj3723
    @aravindmj3723 6 ปีที่แล้ว +28

    I think it's the only "tutorial" on ShapeShifter. Awesome work bro.

  • @mohitsoni6986
    @mohitsoni6986 6 ปีที่แล้ว +6

    THIS IS AWESOME!!! Thanks for sharing it :) You can also design various elements of this icon in different layers respectively in illustrator and save it as svg, go to shape shifter and import the same, you'll find same layers over there. You need not to import again and again in shape shifter for each element(s). Though, your work is truly above and beyond. Thanks!

  • @anthonypenna476
    @anthonypenna476 6 ปีที่แล้ว +1

    I did a couple of things:
    - Subscribe
    - Liked
    - Left a comment
    - Told you you are awesome
    On a second thought, I haven't told you you are awesome yet. You're awesome Gary!

  • @will9301
    @will9301 5 ปีที่แล้ว +3

    Icon with bigger-size :
    In .shapeshiter's css
    - change your wished size with "width" and "height" (in my case 24px to 48px)
    - modify your "background-size" (in my case "6240px 48px" cause the width of my svg was "3120"
    In @keyframes -> 100%
    - play with the background-position's width (in my case was -3096px, switched it to -6192px)
    If you see your icon's moving, it's because you haven't the good value. The faster your icon moves, the farther away you are from the right size !

    • @gebozinhomalvado9086
      @gebozinhomalvado9086 5 ปีที่แล้ว

      Did you manage to grasp full control of it? I've played around with those properties before reading your comment and all I've managed to do was distort and "cut" the bottom of my animation

    • @gebozinhomalvado9086
      @gebozinhomalvado9086 5 ปีที่แล้ว

      Better question: where is your background-size at? I don't have it

    • @gebozinhomalvado9086
      @gebozinhomalvado9086 5 ปีที่แล้ว

      OK never mind, I added the property, scaled the width according to the height using a graphics program and got it working at first try. Thanks!

    • @gmerggo4362
      @gmerggo4362 5 ปีที่แล้ว

      Thank you very much for this !

    • @michals3089
      @michals3089 4 ปีที่แล้ว

      thank you soo much!

  • @rajesht9702
    @rajesht9702 4 ปีที่แล้ว

    Thank You Mr. Gary Simon. Appreciate your work.

  • @npnp6240
    @npnp6240 5 ปีที่แล้ว

    Hi Gary, To export all svg shaps at once. just duplicate Artboard (Ex: 3 Artboards according to your work) and edit them. Go to File>Export>Export Screens - you will appear a window - Select the Artboards that you need to export > Select the SVG From Format and Path that you need to export > Export Artboard Button. Cheers.

  • @niner8275
    @niner8275 6 ปีที่แล้ว +4

    Didn't know of shapeshifter yet, nice tool. I think the only reason the SVG has become so big is that you animated the path which creates 60 or 30 variants of it per second. I remember this from the old Flash days when morphing shapes was always a big resource hog in terms of file size. And this may also be the only reason for having "30fps" and "60fps" versions, because every frame represents a distinct SVG shape. If shapeshifter could animate transforms (which it seems it doesn't right now), the file size would drop to a very small fraction. So file size again is the price you pay for wysiwig.

  • @arthurprather6720
    @arthurprather6720 6 ปีที่แล้ว +6

    5:48 -- for AI users... Be sure to "export > export as" to save SVG. instead of "save as" which will save curvature line not SVG. : )

  • @flaviudsi
    @flaviudsi 4 ปีที่แล้ว

    Hey Gary.. Awesome tutorials you create, thanks for all your great work and sharing. Past weeks I've watched only your tutorials. Tip for ShapeShifter: To rename the layer, you select it and in top right you edit the name. It took me some time to figure that out.

  • @qianbang_
    @qianbang_ 6 ปีที่แล้ว +3

    demit. I need to sleep.. These tutorials make my curious self awake -_-

  • @jotajaviergonzalezgarcia7504
    @jotajaviergonzalezgarcia7504 4 ปีที่แล้ว +1

    Hi. Greetings from spain. Great tuto. This can be done even with font awesome svgs

  • @oneavi
    @oneavi 5 ปีที่แล้ว

    Clear + useful + valuable tutorial. Highly appreciated . Keep up the good work Gary!

  • @LazyBearHQ
    @LazyBearHQ ปีที่แล้ว

    I have been searching for this. Thanks man

  • @cseymour97
    @cseymour97 6 ปีที่แล้ว +6

    You could also select them all and export as SVG and it will export them individually

  • @13thdisciples28
    @13thdisciples28 6 ปีที่แล้ว

    Thanks dude. You are helping me build my career bit by bit.... You are a good man. God bless you.

  • @mohamedfariz
    @mohamedfariz 6 ปีที่แล้ว

    ShapeShifter is Awesome & Your Tutorial made it so simple

  • @liamuk7
    @liamuk7 6 ปีที่แล้ว +1

    Very useful, would love to see more of these!

  • @pritampatil91
    @pritampatil91 4 ปีที่แล้ว

    A very excellent tutorial. please make some more like these.

  • @יהונתןאלטמן-ז1ב
    @יהונתןאלטמן-ז1ב 5 ปีที่แล้ว +1

    Thanks allot for this tutorial.
    You're one of my best teachers.

  • @Pankaj-Verma-
    @Pankaj-Verma- 4 ปีที่แล้ว

    Incredibly useful.
    Thank you so much for your kind help!

  • @trevorohara-oates4710
    @trevorohara-oates4710 6 ปีที่แล้ว

    For anyone who may be running into the problem of the vector not animating, I have found the reason why.
    I was trying to use this method to make an SVG animation with text but what I came to find out is that the SVG wouldn't animate from start to end.
    The reason for this is because the SVG path does not have the stroke aligned to the center.
    For this tutorial to work, the stroke MUST be alligned to the center to actually do any animation.

  • @bensonmwaura9494
    @bensonmwaura9494 6 ปีที่แล้ว

    Excellent insights! adding this to my creativity toolkit.

  • @thecoderabbi
    @thecoderabbi 2 ปีที่แล้ว +1

    Thanks Gary

  • @andrerothweiler9191
    @andrerothweiler9191 6 ปีที่แล้ว

    Lol, I always thought it was animated with CSS. Now I am happy to know, that there is an easier alternative.

  • @mounir101
    @mounir101 6 ปีที่แล้ว

    Great today's video, has 0 dislike. thanks a lot man.

    • @DesignCourse
      @DesignCourse  6 ปีที่แล้ว

      Immediately after you said that, someone just had to click dislike. ;) Thanks for the comment though!

  • @mtcindianutube
    @mtcindianutube 6 ปีที่แล้ว

    Great insight to svg animation, thanks a lot

  • @rebarius
    @rebarius 6 ปีที่แล้ว

    Now the Fog disappeared :D great video again! Thanks 💪🏼

  • @jamesharrison4272
    @jamesharrison4272 6 ปีที่แล้ว

    Adobe Illustrator knowledge is a prerequisite for this video. Stack developers that do not have an adequate proficiency level with Ai will struggle and should either learn Ai first or move on because it will be difficult to follow along. I bailed, too much on my plate to hunt and peck around in Ai CS6 to find either from menus or keyboard short cuts how you were manipulating /creating icons.
    Looked as if it could have been useful though.

  • @ColinsMatas
    @ColinsMatas 6 ปีที่แล้ว

    love your videos!!! i can understand even i never tried using AI

  • @zael7848
    @zael7848 5 ปีที่แล้ว +1

    I was looking for this for a really long time, thank you so much!!

  • @mammlouk
    @mammlouk 6 ปีที่แล้ว +2

    Thanks a lot for covering this. I hadn't seen Shapeshifter before. Looks like it is even Open Source which is great news! I wonder if they'll eventually add a Desktop version so that I can run it offline without having to serve it up via localhost.

    • @aIexjI
      @aIexjI 6 ปีที่แล้ว +1

      Jeremy Coleman Creator of ShapeShifter here! Assuming you've navigated to the page once before, you should be able to navigate to the page even without a network connection. Turn off your WiFi and see for yourself. :)
      Feel free to file a feature request on GitHub too if you still think the desktop version would be useful! github.com/alexjlockwood/shapeshifter

    • @mammlouk
      @mammlouk 6 ปีที่แล้ว +1

      @Alex Lockwood - Thanks for the response! Nice to hear it will work offline after caching the application. As a Linux user and also as someone who very often finds myself with constrained internet access on different corporate systems I will always find value in a standalone application. It is one of the things that a I really appreciate from the Gravit Designer team. Providing an zip based download for Windows and a .gz, Snap, or AppImage for Linux makes a big impact on whether I am able to use an application regularly in my workflow. I also think that packaging for Linux would be a great way for you to increase app visibility and useage. Linux guys go crazy over high quality open source software that fills gaps left by commercial vendors who refuse to build fully cross-platform applications. I'll try to remember to submit a feature request when I have some time in the next week.

  • @PhilipHarperGraphicDesign
    @PhilipHarperGraphicDesign 6 ปีที่แล้ว

    THIS IS BRILLIANT

  • @easyluckable
    @easyluckable 6 ปีที่แล้ว +12

    Cool, now SVG animation is much easier to do.

    • @ГригорийХовер
      @ГригорийХовер 5 ปีที่แล้ว +1

      There is plenty of fancy tools to do that. Also coding it yourself is really interesting!

    • @toybeaver
      @toybeaver 5 ปีที่แล้ว +1

      @@ГригорийХовер The best one I could find is one called Spirit but it's paid which is just a serious drawback for a lot of people. I prefer coding it myself, but this shapeshifter can really come in handy :p

  • @panayiotispavlides2148
    @panayiotispavlides2148 6 ปีที่แล้ว +1

    thank you so so much! this is such a good tutorial

  • @whatthefunction9140
    @whatthefunction9140 3 ปีที่แล้ว

    if you had chosen .svg, where is the animation data stored? is css able to control the animation?

  • @dovilekirdeikyte1965
    @dovilekirdeikyte1965 6 ปีที่แล้ว

    When i'm checking SVG code, I dont find Path d=... Is it because I'm using older AI version? Or I'm doing smth in wrong way?

  • @leticiac1998
    @leticiac1998 3 ปีที่แล้ว

    I need to transform an AF file into an SVG, but when I do that the "puppet" effect that I used doesn't work does anyone have any solutions?

  • @DommyAngka
    @DommyAngka 5 ปีที่แล้ว

    hi, sorry to ask this silly question, is it Adobe CC? coz I'm surprise on how you can change the corner radius so easy

  • @rapundercover3292
    @rapundercover3292 6 ปีที่แล้ว

    When I type in the d="xx" code and pass it to the toValue, than it shows me an "Paths are incompatible. Auto fix or click the edit path morphing animation button above" error. Can somebody help me?

  • @gamingforever4587
    @gamingforever4587 4 ปีที่แล้ว

    Can you please give a list of plugin you are using in VSC, which showing auto complete of css, and javascript.

  • @alexandprivate1
    @alexandprivate1 6 ปีที่แล้ว

    Great video man! well done!

  • @bbenz9750
    @bbenz9750 6 ปีที่แล้ว

    Thanks for the tip. Sure helps to save time.

  • @alexander-van-aken
    @alexander-van-aken 6 ปีที่แล้ว

    How could I, for instance, trigger another animation. Lets say this animation you made starts in the center of a white bg and once clicked, it slides up and a svg line pops and bends from the bottom up revealing the page content all without refreshing the page. Once clicked another menu item, the animation reverses and forwards again without reloading the page.

  • @stevenkennedy8609
    @stevenkennedy8609 6 ปีที่แล้ว

    How would you compare the optimization of something animated in this tool versus a tool like greensock? It's clearly easier, but I'm wondering if the code size would be bigger.

  • @karinakozinsky741
    @karinakozinsky741 6 ปีที่แล้ว

    You could export all lines as a group and flatten the group in shapeshifter

  • @Nic-xu9pu
    @Nic-xu9pu 6 ปีที่แล้ว +6

    Can you use after effects to animate the icon, will it still be responsive

    • @armagan7417
      @armagan7417 5 ปีที่แล้ว

      Regardless of the tool that you used, SVG will always be responsive. It's named as Scalable Vector Graphic for a reason ^^

  • @RindraParama
    @RindraParama 6 ปีที่แล้ว

    i try this, and it's make my svg's file size from 2kb to 267kb @60fps.
    is svg animation file size can't get any smaller?
    btw, it's a nice tutorial

  • @netanelmad
    @netanelmad 6 ปีที่แล้ว

    Great video, thanks!

  • @well7573
    @well7573 6 ปีที่แล้ว

    Extremely helpful! Thanks

  • @meza_bxg
    @meza_bxg 4 ปีที่แล้ว

    How can I change the size of the icon?
    I try it but the animation is not works

  • @ColinsMatas
    @ColinsMatas 6 ปีที่แล้ว +1

    file size is very big problem...i think not much scenario are applicable if the fileszie are not greatly reduced.

  • @winterlovers5756
    @winterlovers5756 6 ปีที่แล้ว

    That's great tutorial, thank you men 😀😀

  • @PaulMcCannWebBuilder
    @PaulMcCannWebBuilder 6 ปีที่แล้ว +2

    I had high hopes for shape shifter until I saw it animates for the web with frames and steps, rather than doing the math to animate the paths (the way a javascript solution like Greensock would do). Although it is a great solution for Android and I certainly appreciate the work Alex has done and it deserves some support - github.com/alexjlockwood/ShapeShifter
    Great tut, with some nice tricks though.
    The sprite sheet export solution might be good for designers who need to quickly prototype animations, or for animations that would work well as frame-by-frame - they'd be scalable and smaller than a gif alternative. I hope someone smarter than me could help add features for better web-based exports:
    Animating simple properties like color, stroke, and trimPath (with the dash offset trick) are easily done in CSS, without needing to make a frame for each step.
    The clip path that clips the individual frames are fixed pixel dimensions that make it hard to make responsive, although some sort of transform:scale() trick or editing the svg's viewport would work.

  • @bizhanbazhirov2404
    @bizhanbazhirov2404 5 ปีที่แล้ว

    Awesome video, I have a question tho, how can I change the size of the animation? I mean it is h362 w362 and I need h80 w80

  • @squirrelwise
    @squirrelwise 6 ปีที่แล้ว

    Great video. Thank you so much

  • @Synkto01
    @Synkto01 6 ปีที่แล้ว

    Dude! amazing tutorials ty!!!

  • @nepalcodetv6298
    @nepalcodetv6298 6 ปีที่แล้ว +2

    we need more on SVG ICONS

  • @remanentecatolico
    @remanentecatolico 6 ปีที่แล้ว

    Great, do you know a software to do it exactly like that? I mean it makes a svg file and only use it in html as easy as your video shows. And do you know if it is possible to do it in animate cc without using javascript?

  • @milosp.551
    @milosp.551 6 ปีที่แล้ว

    Awesome! Thank you for this video! You are king! :D

  • @minamulhaq
    @minamulhaq 6 ปีที่แล้ว

    Wow. Great man

  • @dimitridehouck9506
    @dimitridehouck9506 6 ปีที่แล้ว

    Quick question, I'm not into Javascript yet. But can't you just use CSS for the button to click? Like :focus or something?

  • @buuqmarabo2778
    @buuqmarabo2778 6 ปีที่แล้ว

    thanks for your help.

  • @_arjun991
    @_arjun991 6 ปีที่แล้ว

    Great Sir... Thanks

  • @ctx4241
    @ctx4241 6 ปีที่แล้ว

    Is there a way to use either spritesheet or any other export option for JavaFX?

  • @Shiwoen
    @Shiwoen 6 ปีที่แล้ว

    Cool. I was just planning on making some animated SVG Icons. Thank you for the video. Though, shapeshifter seemed to distort the paths of my imported SVG. I didn't have this issue if i imported the same file into svgator.

    • @aIexjI
      @aIexjI 6 ปีที่แล้ว +1

      Shiwoen do you mind creating an issue on GitHub so I can fix the issue? Just copying/pasting the svg text and posting that will help a ton! :) github.com/alexjlockwood/ShapeShifter/issues

    • @Shiwoen
      @Shiwoen 6 ปีที่แล้ว

      Alex Lockwood Sure thing, I'll take care of it later today.

  • @dineshjayathunge9943
    @dineshjayathunge9943 6 ปีที่แล้ว

    Is it possible to do the same animations using the SVG icons from the material-icons page?

  • @andregabriel5246
    @andregabriel5246 6 ปีที่แล้ว

    Thanks, dude!

  • @RomboutVersluijs
    @RomboutVersluijs 5 ปีที่แล้ว

    Why not delete the point with the pen tool, save you extra clicks :) Nice tut by the way!

  • @skapha
    @skapha 6 ปีที่แล้ว

    great video! i want more! : )

  • @rohitsagar9011
    @rohitsagar9011 6 ปีที่แล้ว

    You are awesome .

  • @robertcieslinski4042
    @robertcieslinski4042 5 ปีที่แล้ว

    is there an option to save as one SVG file with animation without sprites?

  • @HyperActive94
    @HyperActive94 5 ปีที่แล้ว

    great video thanks a lot

  • @NickyKeyse
    @NickyKeyse 6 ปีที่แล้ว

    Great video on shape shifter, I didn't know about it. Thanks.
    Is there a way to make the exported icon larger? If I just adjust the width and height in the css file .shapeshifter class I just get repeated icons.
    Thanks in advance for any help.

    • @jojo_Ca
      @jojo_Ca 6 ปีที่แล้ว

      Same here, been trying to figure that out too...

    • @will9301
      @will9301 5 ปีที่แล้ว

      Did you success ?

  • @mackry
    @mackry 5 ปีที่แล้ว

    Doesn't background-position cause repaints lowering performance?

  • @TEJASKESARIA
    @TEJASKESARIA 6 ปีที่แล้ว

    Awesome

  • @nielshgh4036
    @nielshgh4036 6 ปีที่แล้ว

    Hey man! Great tutorial! I just can't figure out how to make that button ('btn') work. I've literally tried everything ( i think ). I've follow u step by step, and even copied your code from begging to the end. Can you please help me out?

    • @DesignCourse
      @DesignCourse  6 ปีที่แล้ว +1

      I would submit your code to stackoverflow or one of the other sites in that niche.

  • @-Pavankalyan-dw1ew
    @-Pavankalyan-dw1ew 6 ปีที่แล้ว

    Thanks for your tutorial. Can you make video on group of icons at the same . What I mean is adding and removing of class of icons on click. It will be very useful .

  • @SapumalMoragoda
    @SapumalMoragoda 6 ปีที่แล้ว

    Thanks bro.

  • @soul.rebel1986
    @soul.rebel1986 5 ปีที่แล้ว

    Thanks for the video! Are there other application besides using Ai to accomplish this?

    • @jundeleon8704
      @jundeleon8704 5 ปีที่แล้ว +1

      inkscape is a good one

    • @soul.rebel1986
      @soul.rebel1986 5 ปีที่แล้ว +1

      @@jundeleon8704 I'll look into that, I appreciate the info :)

  • @nepalcodetv6298
    @nepalcodetv6298 6 ปีที่แล้ว

    Where is another corse love this one..

  • @stevegoodjob5902
    @stevegoodjob5902 6 ปีที่แล้ว

    Thanks for the Sheep 🐑 shifter lol great tut

  • @renzviana6591
    @renzviana6591 5 ปีที่แล้ว

    can i use this for xml file i mea for android development im using android studio

  • @paxwebb
    @paxwebb 5 ปีที่แล้ว

    I made my animation way too big. How can I control the size in the code? (or scale the animation in shapeshifter). Great videos btw, I subscribed :P

    • @juliosoto9471
      @juliosoto9471 5 ปีที่แล้ว

      Probably with the SVG viewport. In your code.

  • @speedtnt7591
    @speedtnt7591 ปีที่แล้ว

    isn't it possible to animate it in Adobe itself?

  • @VideoNOLA
    @VideoNOLA 19 วันที่ผ่านมา

    Couldn't find a "Delete" button anywhere in the ShapeShifter UI, so you end up with a bunch of aborted paths and stuff. Interested to fiddle with the beta version, which adds a tool palette (but still no "Delete" button, lol).

  • @IfIgetsubsIllGobacktomyfamily
    @IfIgetsubsIllGobacktomyfamily 4 ปีที่แล้ว

    When I import my design it gets stuck halfway through, is there a fix to this?

    • @animotu_editorial
      @animotu_editorial 4 ปีที่แล้ว

      th-cam.com/video/0YL6AxK7hWA/w-d-xo.html

  • @danielakachi3666
    @danielakachi3666 6 ปีที่แล้ว

    Nice !!

  • @falfiya
    @falfiya 6 ปีที่แล้ว

    Good stuff, I tell you!

  • @oemeraran8183
    @oemeraran8183 6 ปีที่แล้ว

    There are no 3 dots in my example to use "Convert to clip path" 11:50...

    • @Beyond-30
      @Beyond-30 6 ปีที่แล้ว

      same here, I'm facing the same problem. I couldn't find this option anywhere!

  • @395implants5
    @395implants5 6 ปีที่แล้ว

    seems so cool, but for some reason it does not animate anything i am doing, not sure why

  • @mirjamkuhl
    @mirjamkuhl 6 ปีที่แล้ว

    Cool, but I can't figure out how to loop the svg animation in the browser without a button click. Would like to learn ;-)

    • @gebozinhomalvado9086
      @gebozinhomalvado9086 5 ปีที่แล้ว

      Probably too late, but you can do that with CSS3. Add this to your .shapeshifter.play block: animation-iteration-count: infinite

  • @kukuhaldyanto
    @kukuhaldyanto 6 ปีที่แล้ว

    wow thanks!

  • @incyphe
    @incyphe 6 ปีที่แล้ว

    90KB.. ouch. I think you're better off using Lottie and bodymovin if you have access to After Effects.

    • @DesignCourse
      @DesignCourse  6 ปีที่แล้ว

      incyphe I'm fairly certain this can be much more optimized. I'll look into it

    • @aIexjI
      @aIexjI 6 ปีที่แล้ว +9

      I was inspired by your comment and ended up reducing SVG spritesheet exports by about 44% on average. Will deploy a new release soon. I'm the one who made shape shifter btw if that isn't obvious :p twitter.com/alexjlockwood/status/992241261598855168?s=19
      Also about Lottie... Yeah, definitely more powerful... You can do tons of crazy stuff. The bodymovin file will most likely be more than 90kb though. :) It also requires you to know after effects (and to pay a $500 annual subscription to use it). This was kind of the main reason why I started making shape shifter... A free open source tool that can run in your browser (although I acknowledge I will probably never be able to compete with adobe... its been mainly just me working on Shape Shifter up until this point :D).

    • @aIexjI
      @aIexjI 6 ปีที่แล้ว +3

      FYI, I just deployed the fix at shapeshifter.design (lmk if you see a difference in file size!)

  • @clickrad
    @clickrad 6 ปีที่แล้ว

    does this work in figma?

  • @Juan.salomon
    @Juan.salomon 4 ปีที่แล้ว

    LinkedIn Instructor 😱

  • @GustavoSilva-kr6pi
    @GustavoSilva-kr6pi 6 ปีที่แล้ว +2

    How to reverse the animation when click on X

    • @jevoscure
      @jevoscure 4 ปีที่แล้ว

      good question

  • @zs.d.7081
    @zs.d.7081 5 ปีที่แล้ว

    Great, thanks for this! I wanted to use this for icon animation when it comes to viewport, here are some plain JS for that:
    var element = document.getElementById('btn');
    var elementHeight = element.clientHeight;
    document.addEventListener('scroll', animate);
    function inView() {
    var windowHeight = window.innerHeight;
    var scrollY = window.scrollY || window.pageYOffset;
    var scrollPosition = scrollY + windowHeight;
    var elementPosition = element.getBoundingClientRect().top + scrollY + elementHeight + 200;
    if (scrollPosition > elementPosition) {
    return true;
    }
    return false;
    }
    function animate() {
    if (inView()) {
    element.classList.add('play');
    }
    }

  • @gvsakhil143
    @gvsakhil143 5 ปีที่แล้ว

    Why don't u add the files so that it makes people to use them when they don't have Illustrator installed at that moment... Thanks for the great tutorial

  • @dusant8697
    @dusant8697 6 ปีที่แล้ว

    cool