Forem: angelina-white

Draggable elements between two lists

angelina-white — Fri, 15 Jul 2022 15:40:53 +0000

This is for a basic dragging and dropping capability in between two set spots.

Helpful resources

This is the documentation for GSAP draggable, which is what I used. I also watched this Youtube tutorial by Wael Yasmina that was helpful in getting an idea for what you're able to do with this function.

I found this CodePen by Steve Wojcik and worked from there. I wanted to get familiar with the basics so I removed a lot of extra features that was in it like dropShadow, dragGroup, and highlight. I tested each section to see if it would effect the main drag and drop function, and if it didn't, I just removed it. This also helped get an idea for what different parts do.

Imports

I used these scripts:
//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/utils/Draggable.min.js
//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js
//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

HTML

<div id="container" class="container">
  <h1 id="list1">List 1</h1>
  <h1 id="list2">List 2</h1>

  <div id="dropArea"></div>
  <div id="dropArea2"></div>
  <div id="dropArea3"></div>

  <div class="first">
    <h3>1</h3>
  </div>
  <div class="second">
    <h3>2</h3>
  </div>
  <div class="third">
    <h3>3</h3>
  </div>
</div>

container: the boundary
lists: just the titles and will not be used
drop areas: where the boxes will drop under list 2
first/second/third: the draggable boxes

CSS

.container
{
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 400px;
  height: 330px;
  border-radius: 3px;
  border-style: solid;
  border-color: #fed3c1;
  border-width: 2px;
}

#list1 {
  margin-left: 100px;
  position: relative;
  margin-top: 35px;
}

#list2 {
  margin-left: 230px;
  position: absolute;
  margin-top: -58px;
}

.first
{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50px;
  height: 50px;
  background-color: pink;
  top: 100px;
  left: 106px;
  text-align: center;
}

#dropArea
{
  position: absolute;
  top: 100px;
  left: 242px;
  width: 50px;
  height: 50px;
}

.second
{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50px;
  height: 50px;
  background-color: pink;
  top: 175px;
  left: 105px;
  text-align: center;
}

#dropArea2
{
  position: absolute;
  top: 175px;
  left: 242px;
  width: 50px;
  height: 50px;
}

.third
{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50px;
  height: 50px;
  background-color: pink;
  top: 250px;
  left: 105px;
  text-align: center;
}

#dropArea3
{
  position: absolute;
  top: 250px;
  left: 242px;
  width: 50px;
  height: 50px;
}

I added background colors to everything while I was working with it so I could see exactly where everything was. I pretty much kept everything in the same place except when adding a new box, I made the start and finish lower.

Javascript

var dropArea = "#dropArea";
var overlapThreshold = "60%";

Draggable.create(".first", 
{
  bounds: "#container",
  onDrag: function(e) 
  {
      TweenLite.to(".first", 0.2, 
      {
        scaleX:1.10,
        scaleY:1.10
      });
  },
  onDragEnd: function(e) 
  {
    if (this.hitTest(dropArea, overlapThreshold)) 
    {
      TweenLite.to(this.target, 0.2, 
      {
        x: 136,
        y: 0,
        scaleX:1,
        scaleY:1
      });
    } 
    else 
    {
      TweenLite.to(this.target, 0.2, 
      {
        x: 0,
        y: 0,
        scaleX:1,
        scaleY:1
      });
    }
  }
});


var dropArea2 = "#dropArea2";
var overlapThreshold = "60%";

Draggable.create(".second", 
{
  bounds: "#container",
  onDrag: function(e) 
  {
      TweenLite.to(".second", 0.2, 
      {
        scaleX:1.10,
        scaleY:1.10
      });
  },
  onDragEnd: function(e) 
  {
    if (this.hitTest(dropArea2, overlapThreshold)) 
    {
      TweenLite.to(this.target, 0.2, 
      {
        x: 136,
        y: 0,
        scaleX:1,
        scaleY:1
      });
    } 
    else 
    {
      TweenLite.to(this.target, 0.2, 
      {
        x: 0,
        y: 0,
        scaleX:1,
        scaleY:1
      });
    }
  }
});


var dropArea3 = "#dropArea3";
var overlapThreshold = "60%";

Draggable.create(".third", 
{
  bounds: "#container",
  onDrag: function(e) 
  {
      TweenLite.to(".third", 0.2, 
      {
        scaleX:1.10,
        scaleY:1.10
      });
  },
  onDragEnd: function(e) 
  {
    if (this.hitTest(dropArea3, overlapThreshold)) 
    {
      TweenLite.to(this.target, 0.2, 
      {
        x: 136,
        y: 0,
        scaleX:1,
        scaleY:1
      });
    } 
    else 
    {
      TweenLite.to(this.target, 0.2, 
      {
        x: 0,
        y: 0,
        scaleX:1,
        scaleY:1
      });
    }
  }
});

This has the same code base three times, one for each box. I just changed the variable names to reflect where the box should land.

bound: this is where you put the container you want to keep your draggable item in
onDrag: when the box is being dragged, it will look slightly bigger
onDragEnd: If the box is placed in the dropArea, it will stay there, else, it will go back to its original position under List 1

Simple Homemade Loading Screen in React

angelina-white — Fri, 24 Jun 2022 14:40:53 +0000

Reference tutorial

In my last blog, I mentioned this tutorial by Tony Heimark that is super easy to follow. I'll be going off of that, but making the animation instead. He uses the package, react-spinners. Instead of that, I'll be using the flower icon I found off of flaticon.com.

Finding an image

I went into google and typed in "flower icon". I went to flaticon.com. I just right clicked the image for the image address. This gives an image with no background.

App.js

In App.js, I made a useEffect with a setTimeout inside. This will be how long the screen is loading for. This will load for 5 seconds.

  const [loading, setLoading] = useState(false);
  useEffect(() =>
  {
    setLoading(true)
    setTimeout(() =>
    {
      setLoading(false)
    }, 5000)
  }, [])

Under return, I made a ternary statement with the loading state. If loading is true, show the loading screen. If loading is false, show the homepage.

  return (
    <div class="App">
      {loading ? 
        <Flower />
      :
      <div class="homePage">

I made a separate component for the loading screen called, "Flower".

Flower.js

In Flower.js, I made a useEffect with the animation inside it.

  useEffect(() =>
  {
     gsap.to("#flower", 1.75, 
     {
        y: 75,
        yoyo: true,
        repeat: -1, 
        ease: "power1",
     });
 }, [])

This animation makes the flower float up and down. 1.75 is the amount of time for the animation. The "y" makes it move up 75 pixels. The yoyo being true means the flower will yoyo up and down 75 pixels. The repeat being -1 means it will repeat forever. The ease is the kind of style it is moving.

Under return, I added the image and a tag that says it's loading.

  return (
    <div class="loadingScreen">
        <img className="bus" src="https://t4.ftcdn.net/jpg/01/76/26/25/360_F_176262588_5UBYLDB9mqLxdqavixo0d4XF4g6ydFpZ.jpg" />
        <h1 id="loadingText">Loading...</h1>
    </div>
  )

I was playing around with it, and another animation idea would be for the flower to spin.

gsap.to("#flower", 2, 
{
    rotation: 360,
    repeat: -1, 
    ease: "slow",
 });

This just rotates the flower 360 degrees forever with a "slow" style.

Animation Finds for React

angelina-white — Thu, 02 Jun 2022 17:28:29 +0000

I've been working on a recipe saver app in React and using it to learn how to implement different animations with GSAP. These are the animations I've learned so far and how to do them. Some also include the tutorials I've found for them.

Horizontally moving title into place
Fading page in
Loading screen
Horizontally scroll through images
Using ScrollTrigger to move images from left and right

Using GSAP in React

1: Install GSAP into React.
npm i gsap

2: Import GSAP at the top of the page.
import { gsap } from "gsap";

3: In Index.js, I removed the lines with strict mode in order for the animations to work.

  <React.StrictMode>
  </React.StrictMode>

4: Add the hooks you are using
import { useEffect, useState } from "react";

Horizontal Movement

This will make the title move into place from the right whenever the page is started. This will be done in Home.js.

1: In the return section, create an h1 tag with the page title and an id. That id is what I used for the tween.

return (
   <h1 id="homeTitle">Home</h1>

2: Before the return, create a useEffect() hook

useEffect(() =>
  {
  }, [])

3: In useEffect(), create a tween with the "homeTitle" id. This will make the title move into place from 50 pixels to the right.

gsap.from("#homeTitle", {x: 50, duration: 1})

Page Fade In

This will fade in the page when the app is started. This will all be done in App.js.

1: In the return section, I put a div with a class. That class is what I used for the tween. The contents of the entire page will go into this div.

return (
   <div className="homePage">
   </div>

2: Before the return, create a useEffect() hook

 useEffect(() =>
  {
  }, [])

3: In useEffect(), create a tween with the "homePage" class. If you would like the fade to be longer, change the duration to a higher number. This tween is starting from the opacity of 0 so it will fade in from blank.

gsap.from(".homePage", {duration: 1, opacity: 0});

Loading

To find out one way to make a loading screen, I followed this easy to follow tutorial on YouTube by Tony Heimark. He used the package, react-spinners.

You can make this loading screen as long as it takes to load your data. My data is 5 very simple recipes so I put it in a setTimeout hook to see it more as Heimark shows. This will all be done in App.js.

Using react-spinners
1: Install the package.
npm install --save react-spinners

2: Find which loader you like on the demo page. I chose SyncLoader.

3: At the top of App.js import your loader.
import SyncLoader from "react-spinners/SyncLoader";

Before the return
1: Create a state that shows whether "loading" is true or false.
const [loading, setLoading] = useState(false);

2: Create a useEffect() hook underneath the loading state.

 useEffect(() =>
  {
  }, [])

3: In useEffect(), set loading to be true.
setLoading(true)

4: In the useEffect() after setting loading to true, add a setTimeout() hook. This is set to timeout after 5 seconds.

setTimeout(() =>
{
}, 5000)

5: In setTimeout() set loading to be false. After 5 seconds, loading will be set back to false.
setLoading(false)

In the return
1: Make a div that includes everything.

return (
   <div className="App">

2: In the "App" div, create a ternary expression with the loading state.
loading ? true : false

3: Add the loader for when loading is true, and the page contents for when loading is false.

{loading 
   ? 
   <div id="loader">
      <SyncLoader color={"#FFB5D4"} loading={loading} size={30} />
   </div> 
   :
   <div className="homePage">

ScrollTrigger: Horizontal scrolling

I watched this video made by GSAP that explains the different parts of ScrollTrigger and what you can do. You can find a lot of different examples on their website. For horizontal scrolling, I followed this example. Instead of sections, I used images.

Home.js
1: In return, add 3 images with the same class name. I won't include the image sources here to not take up too much space. Instead of images, you can use colored sections to see the movement also.

<img className="panel" src="" />
<img className="panel" src="" />
<img className="panel" src="" />

2: Before the return, create a useEffect() hook

 useEffect(() =>
  {
  }, [])

3: Add animation defaults to the top of the useEffect()
gsap.defaults({ease: "none", duration: 2});

4: Create an array with the panels
let sections = gsap.utils.toArray(".panel");

5: Create a tween that scrolls through the array horizontally

gsap.to(sections, {
   xPercent: -100 * (sections.length - 1),
   ease: "none",
   scrollTrigger: {
      trigger: ".cont",
      pin: true,
      scrub: 1,
      snap: 1 / (sections.length - 1),
      end: "+=3500",
   }
});

App.css
1: I made the image the size of the screen

.panel {
  height: 100vh;
  width: 100%;
}

ScrollTrigger: Images from left and right

This will move an image from the left and another image from the right as you scroll. The other images will sit in place while the animated images move over them. This will be done in Home.js.

Home.js
1: In return, add 6 images. I included a class for each image. I also made a box class that makes the dimensions.

<img className="imageA box" src="" />
<img className="imageB box" src="" />
<img className="imageC box" src="" />
<img className="imageD box" src="" />
<img className="imageE box" src="" />
<img className="imageF box" src="" />

2: Before the return, create a useEffect() hook

 useEffect(() =>
  {
  }, [])

3: Add animation defaults to the beginning of the useEffect()
gsap.defaults({ease: "none", duration: 2});

4: Create a tween with the horizontal movement. This will move the image into full view from the left.
gsap.from(".imageA", {x: -1700})

5: Inside the tween, create a scrollTrigger object. The trigger point for when the image will start moving is when the top of the screen touches the top of the image. The image will be pinned into place once the movement is done. The scrub being true means the scroll will control where the image is at depending on how far you are scrolled. If the scrub was false, the image would animate and move on its own once it is triggered.
The entire tween will look like this:

gsap.from(".imageA", {
   scrollTrigger:
   {
      trigger: ".imageA",
      start: "top top",
      pin: true,
      scrub: true,
   }, x: -1700
})

6: I added another tween for moving another image. This will move an image from the right.

gsap.from(".imageD", {
   scrollTrigger:
   {
      trigger: ".imageD",
      start: "top top",
      pin: true,
      scrub: true,
   }, x: 1700
})

App.css

I made the image the size of the screen.

.box {
   height: 100vh;
   width: 100%;
}

2: For the animated images, I made the animated images have a position of absolute in order to move over the other images set in place.

.imageA {
  position: absolute;
}

.imageD {
  position: absolute;
}

Exploring Web Animations

angelina-white — Wed, 11 May 2022 23:17:14 +0000

Is it even worth it

I've always wondered how animations are done on websites. I thought this would be so cool to learn, but I was also doubtful about how much of it I would actually use. I did a brief search on what was possible and found instructions on how to make words go big then small, and how to make a newspaper rectangle spin and get smaller until it's gone. I dismissed this idea thinking there is probably something more practical I can learn.

Another day, I gave animations another shot and came across this article. It showed examples of really cool things you can do: loading, welcoming, scrolling, image galleries, and visual feedback. It also included different libraries, which helped clear up how mysterious where animations come from is. I looked up more libraries and found even more:

There are so many libraries I am overwhelmed. Some seem like they were more oriented towards doing a specialization while others were larger libraries with more options.

I looked up what library people prefer to use, and I found GSAP mentioned a lot so I decided to roll with it. It has a lot of capabilities, and you can also include plugins that do more specific tasks. It seems like I would be able to do a lot of different things with this library if I learned how to use it. There is a lot of documentation with examples of code, visual examples of how the animation looks, and Youtube tutorial videos. They also show a lot of amazing things people have created.

Using GSAP

“Animation ultimately boils down to changing property values many times per second, making something appear to move, fade, spin, etc. GSAP snags a starting value, an ending value and then interpolates between them 60 times per second.” -Getting Started with GSAP

To include GSAP, add this code to your HTML file before you include your JavaScript file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="index.js"></script>

A tween is one of the foundations of GSAP. It is basically a line of code with information about how you want to animate an object. Here is their example of what a tween looks like:
gsap.to(".box", {rotation: 27, x: 100, duration: 1});

I copied and pasted tweens from GSAP documentation into CodePen, and played around with how the code worked. Every example I show here is from the GSAP documentation JavaScript examples. Some things I changed to match the HTML I made. Here is the first animation I copied, which is text fading:

Html:
<h1>Hello World</h1>

JavaScript:
gsap.to("h1", {duration: 5, opacity: 0.3});

This is a .to() method. The duration is how long it takes to get to that opacity so the opacity starts at 1.0 and goes to 0.3. There are also the .from() and .fromTo() methods. Here is the same example, but with the .from() method.

JavaScript:
gsap.from("h1", {duration: 5, opacity: 0.3});

The duration is how long it takes to get from that opacity so the opacity starts at 0.3 and goes to 1.0.

Here is an example for basic movement horizontally and vertically:

move left:
gsap.to("h1", {duration: 1, x: -100});
move right:
gsap.to("h1", {duration: 1, x: 100});
move up:
gsap.to("h1", {duration: 1, y: -100});
move down:
gsap.to("h1", {duration: 1, y: 100});

*The y: -100 to move up and y: 100 to move down are not typos. It is negative to go up.

Here is an example of how to make things move in a sequence. Whichever line in the JavaScript comes first will move first in this example:

HTML:

<h1>First Movement</h1>
<h2>Second Movement</h2>
<h3>Third Movement</h3>

JavaScript:

var tl = gsap.timeline({repeat: 30, repeatDelay: 1});
tl.to("h1", {duration: 1, x: 200});
tl.to("h2", {duration: 1, x: 200, scale: 0.2});
tl.to("h3", {duration: 1, x: 200, scale: 2, y: 20});

When putting in properties, they have to be in camelCase. For example, for "font-size" you would put "fontSize". This is an example with many properties. I played around with each property trying to figure out what they do.

gsap.to("h1", 2, 
{
    scale: 0.1, 
    y: 60,
    yoyo: true, 
    repeat: -1, 
    ease: "power1.inOut",
    delay:1,
    stagger: 
    {
      amount: 1.5, 
      grid: "auto",
      from: "center"
    }
 });

This makes the text yoyo back and forth from the top left towards the bottom right of the screen

gsap.to("h1", 2 : The 2 is the duration. Apparently, you don't need to specify "duration" here.
scale: 0.1 : The scale is the size of the text.
yoyo: true : When I made yoyo false, the text did not move back to where it initially started.
repeat: -1 : This makes the movement repeat infinitely. I made repeat a positive 1, and the movement only repeated one time.
ease: "power1.inOut" : The ease is the style of the movement. There are different options like elastic, bounce, and sine. There is a visual display if you scroll down to the "Easing" section of how each ease works with a graph of how fast the movement is for each.
delay:1 : Delay is how long until the movement starts.
stagger : The amount of stagger is how long the text stays at that point in between each yoyo. I'm not entirely sure what the "grid" and "from" do at this point.

Here is the code I made for a color changing background gif I wanted to use as the header image for this post. I published it, and instead of the colors fading, the colors were shattering so I replaced it with just an image.

CSS:
background-color: #F8D6FF;

JavaScript:

ar tl = gsap.timeline({repeat: 3});

tl.to("h1", 
{
  duration: 1, 
  backgroundColor: "#F8D6FF"
});

tl.to("h1", 
{
  duration: 2,
  backgroundColor: "#D8C3E8"
});

tl.to("h1", 
{
  duration: 2,
  backgroundColor: "#E9E1FE"
});

tl.to("h1", 
{
  duration: 2,
  backgroundColor: "#C3C3E8"
});

tl.to("h1", 
{
  duration: 2,
  backgroundColor: "#D6E1FF"
});

tl.to("h1", 
{
  duration: 1, 
  backgroundColor: "#F8D6FF"
});

It creates a sequence of transitions from one color to the next, starting with the original background color from the CSS file.

Looking Forward

These are the first steps to learning how to make fun visualizations. GSAP also has information on how to incorporate it in React. We will be learning that soon so I will have to take a look at that as well. I'm going to start looking into more of their recommendations on what I should know and utilizing their plugins. Eventually, I'd also like to branch out and see how to use other libraries.