Jump to content
Search Community

Draggable spin - SVG instead of PNG

TirochH test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi TirochH  :)

 

When you want to use an image as part of your SVG, I'd recommend using it as a pattern. When you let Adobe Illustrator export the image, you get a crazy big data string in the SVG. To build a rotating control dial, it's really just a series of circles with varying width strokes and then the pattern for the texture. You can define your pattern in the <defs> something like this:

  <pattern id="grid" patternUnits="userSpaceOnUse" width="800" height="800">
    <image xlink:href="https://linkToYourImageWillBeHere" x="0" y="0" width="800" height="800" />
  </pattern>

and then use it as the fill for the main circle like this:

<circle r="400" fill="url(#grid)" cx="400" cy="400" />

Here's a demo to get you started:

 

See the Pen eWNRpe by PointC (@PointC) on CodePen

 

You can see that is pretty close to what your SVG looked like, but now you have the ability to change the stroke widths and colors to your liking.

 

Hopefully that helps.

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

Hello TirochH

 

Be careful when using the hwb() (Hue-Whiteness-Blackness) color model, since it is still experimental and not even part of the CSS1, CSS2, or CSS3 spec.

 

However hwb() color model was put forward in the CSS4 spec as Draft Status, but is still experimental. So all modern browsers will just ignore the hwb() color in the browser. Your better off just using rgb(), rgba(), hsl(), or hsla() if you want true cross browser compatibility.

 

You can see that modern browsers will just ignore your applying of hwb() in your lasts tween on Line 83 in your codepen, since it is ignored and not a valid color model.

 

See <color> value: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

 

Happy Tweening! :)

  • Like 1
Link to comment
Share on other sites

As with all things, there would be several ways to animate the main stroke color based on the rotation. I would take a simple approach and create another timeline or tween that animates the stroke color(s) you want and then update that tweens progress based on the rotation.

 

I've updated my demo to reflect this addition.

 

See the Pen eWNRpe by PointC (@PointC) on CodePen

 

Hopefully that helps.

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Thank you, it runs.

 

For your info: The result of the knob: 

See the Pen eWpWJm by TirochH (@TirochH) on CodePen

 

Annother questions:

 

1. when I start from rotation x, how I can "initialize", that at start I have the right color ?

2. when I want go from color (rotation 0) "yellow orange red", what I have to do?

3. Alternative  to the color circle;

      - round circles around the knob 
     - init state (rotation = 0): white or transparent

     -  state by rotation   = x, all circles from 0 to x, are on (color, color depending of  rotation)

 

gui_volume_knob_psd_by_drx_design-d4gxyk

 

Hans

Link to comment
Share on other sites

1. when I start from rotation x, how I can "initialize", that at start I have the right color ?

 

I'm not sure I understand the question. The stroke color in my demo doesn't have to be initialized. It would just start at whatever color you choose in the SVG. In the case of my demo, that is green.

 

2. when I want go from color (rotation 0) "yellow orange red", what I have to do?

 

If you look at my demo, you'll see that there is a timeline with a name of 'tween'. It consists of two tweens that change the stroke from green (start color) to yellow and then yellow to red. That timelines progress is updated by linking it to the rotation of the dial in my updateData() function. 

 

3. Alternative  to the color circle;
      - round circles around the knob 
 
You could certainly create the dial that way instead of a solid stroke around the circle. You'd just have to trigger the individual circles around the knob depending on the rotation of the dial, but the basic mechanics work the same way. You'd just need to check the dial rotation and add some logic to trigger the little circles animations.
 
Happy tweening.
:) 
  • Like 3
Link to comment
Share on other sites

HI,

 

1. the starting position (position; 0) has not the defined color. Based on your logic, the color should be green. You  are right "nothing is initialized.

Bur how you initialize?        

2. how you select the. stroke, that I get the color from yellow to red.

 3. have you a demo ?

 

Hans

Link to comment
Share on other sites

The starting color is set in the SVG. In my demo that is line 10 of the HTML:

<circle class="ring" r="380" fill="none" stroke="#598527" stroke-width="40" cx="400" cy="400" />

The tweens in the timeline animate the ring color. See how the .ring class is selected and animated here?

var tween = new TimelineMax({ paused:true});
tween.to(".ring", 1, {stroke:"#cfc620", ease:Linear.easeNone});
tween.to(".ring", 1, {stroke:"#790000", ease:Linear.easeNone});

The demo is the same link as the other post:

 

See the Pen eWNRpe by PointC (@PointC) on CodePen

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

okay - you're creating a bunch of divs with your cr_c() function. Line 29 is the div with the blue border:

cr_c(c,800,400,40,"#3b7486","");

If you want a green to start, just change that hex value. After that, it works the same way as my SVG demo. The difference will be that you need to target that div and tween the borderColor instead of the stroke.

 

Happy tweening.

:) 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...