lmgonzalves / jelly Goto Github PK

View Code? Open in Web Editor NEW

112.0 112.0 32.0 877 KB

Drawing and Animating Jelly Shapes with Canvas

License: MIT License

CSS 8.70% JavaScript 85.75% HTML 5.54%

jelly's People

Contributors

Stargazers

Watchers

jelly's Issues

Increase mouse detection size

Hi there,

Do you think it would be possible to detect a wider radius of mouse movement? At the moment, i often find that my mouse goes between the points and no animation occurs. I've tried combatting this with adding more points, but that seems to have odd results.

Any ideas if this is possible?

Cannot preventDefault() onDragStart with react-alice-carousel

My component is use as an item in a react-alice-carousel. When dragging my carousel, I'm trying to prevent Link to be clicked. It seems that using Jelly makes onDragStart event not fired or fired when dragging very quickly. Using a canvas with stroke() makes onDragStart event fired no matter what

import React from 'react';
import Tilt from 'react-tilt';
import { Link } from 'react-router-dom';
import Jelly from 'jelly.js';
import { canvasOptions } from '../../../utils/utils';

class NightySvg extends React.Component {
  componentDidMount() {
    new Jelly(this.canvas.current, canvasOptions('#nightyPath'));
    // const ctx = this.canvas.current.getContext("2d");
    // ctx.beginPath();
    // ctx.moveTo(20,20);
    // ctx.lineTo(20,100);
    // ctx.lineTo(70,100);
    // ctx.stroke();
  }

  canvas = React.createRef();

  handleDrag(e) {
    e.preventDefault();
  }

  render() {
    return (
      <div onDragStart={this.handleDrag}>
        <svg width="289px" height="306px" version="1.1" xmlns="http://www.w3.org/2000/svg" display="none">
          <path id="nightyPath" d="M90.652..." />
        </svg>
        <Link className="menuNav-item" to="/nighty">
          <Tilt className="Tilt" options={{ max: 25 }}>
            <div className="tiltContent">
              <div>
                <span className="menuNumber">01</span>
                <div>nighty</div>
                <canvas draggable="true" ref={this.canvas}
                className="nightyCanvas Tilt-inner" width="289px" height="306px" />
              </div>
            </div>
          </Tilt>
        </Link>
      </div>
    );
  }
}

export default NightySvg;

Jelly doesn't respond to window size

If a jelly is rendered at a desktop size and the window is scaled down, the canvas scales down okay with CSS, but if the page is reloaded, it seems to ignore it's bounding container and renders it at full size.

Larger screen:

Smaller screen:

This is my SVG code:

<svg width="2622px" height="640px" viewBox="0 0 2622 640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none">
            <path d="M2024.35398,639.019917 L2024.35398,639.033416 C1680.6382,639.726285 1508.97788,639.352862 1509.37302,637.913146 C1404.97615,646.944218 1301.86397,600.073111 1216.24958,544.142572 C1195.09767,530.324423 1177.14613,512.71603 1155.35897,499.691946 C1122.14862,479.840319 1086.50928,463.245778 1049.52286,451.964382 C1006.83903,438.944552 962.110479,428.145267 917.396109,426.61102 C878.759173,425.285215 841.802535,431.956779 803.61226,436.345406 C740.723727,443.56998 665.167019,452.684713 607.129372,421.204288 C560.238413,395.770101 532.222097,345.901398 490.951984,312.09975 C405.645293,242.227698 291.148203,272.831816 191.169742,250.822034 C163.55613,244.741765 134.225352,232.619511 115.457058,210.59555 C99.1971579,191.513883 98.9532665,161.827194 74.0182061,149.875097 C54.9819146,140.751857 30.4297069,146.595325 13.967037,132.309244 C4.72185108,124.284933 4.62968281,113.896861 0,104.334049 L0,0.351165471 L1980,0.351165471 L1980,0 L2622,0 L2622,639.019917 L2024.35398,639.019917 Z" id="WAVE" fill="#DAF4EE"></path>
    </svg>

Is there any way it can get the size of it's bounding container and resize the contents inside the <canvas> accordingly? I feel like the fix is easy but I could be wrong. Thanks!

Hello, friend. Give me an answer, please. How can I make an animation with window load?

es6 import use

I'm trying to utilize the plugin by

import $ from 'jquery';
import 'Jelly';

$(function(){
     var options = {
        paths: '#circle-path',     // Shape we want to draw
        pointsNumber: 25,            // Number of points
        maxDistance: 4,             // Max distance among points
        color: '#ff0019',
        opacity: 0.27,
        // centroid: '.centroid-text'   // Element to move accordingly with the centroid of the shape
        // debug: true               // Uncomment this to see the points
     };

    var jelly =Jelly('.jelly-canvas', options);

});

but i get this error instead

Uncaught ReferenceError: Jelly is not defined

any help, ideas please?

Image Resizing/Repositioning within the options variable

Hi @lmgonzalves,

Thankyou for creating this library, we've been looking for something like this and its amazing.

I'm relatively new to learning how canvas works and was just wondering about whether jelly.js supports image resizing or am I missing something. I've created a codepen showing the kind of thing I've been doing, but as you can see the images are larger than the clipped area. https://codepen.io/ben-holness/pen/RwWrdxN?editors=0100

Is image resizing/repositioning functionality built into the library or should I be using the canvas or call other Javascript methods to accomplish this?

How to clip a div element instead of an image?

Hi,
Is there a way to clip a <div> element instead of image?

lmgonzalves / jelly Goto Github PK

jelly's People

Contributors

Stargazers

Watchers

Forkers

jelly's Issues

Increase mouse detection size

Cannot preventDefault() onDragStart with react-alice-carousel

Jelly doesn't respond to window size

Hello, friend. Give me an answer, please. How can I make an animation with window load?

es6 import use

Image Resizing/Repositioning within the options variable

How to clip a div element instead of an image?

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent