I have a line chart that has 4 "frames" of display, based on 4 days. Each of these days can be selected by means of a cursor, which, by scrolling left / right, allows you to see the corresponding "frame" of the line graph for each day. The frames of the line chart are .png rectangles of the same size.
Not really sure what you're expecting ... but for a morph within Hype it'll needs its paths.
you could use an chart-library like billboard or if the chart is quite simple use svg.js. its polylione can be animated to new points using the plot-method
something very similar to this, although in my case I don't have vector shapes...
Thank you for the suggestions, but in this case I don't have the values that determine the curve of the graph, I only have the graph in the form of a closed image
I found this suggestion, but not understanding much about programming, I don't really understand if it can actually help me to obtain the desired morphing ...
I have only created the SVG files of the 4 graphics, but for everything else I have no idea how to proceed.
Just recreate the graph as a vectorshape and than use relative timelines as morph targets... if recreation is not option than blend them into each other. You would have to bump the zIndex of the image fading in to a high number to have it infront … this can be done using the API.
Here is a demo using JavaScript to fade in a container or image for that matter using a selector. The selector is defined as a dataset key: fadeInContainer.hype.zip (17,8 KB)
Here is a version that rembers what was clicked last and disallows fadeing in based on the same trigger element. Also, using the class "initalButton" sets the button inital assumed to have been clicked: fadeInContainerWithInitialAndStore.hype.zip (18,4 KB)
Another approach based on "morphing" is Scene Magic 2.0. It doesn't support vector shape morphing but might also be interessting: Hype Custom Transitions (and Template)
Maybe I managed to get what I wanted by simplifying the original idea: I recreated the curve of the graph in Hype and only to this I applied the morphing.
Then I recreated the other elements overlapping the line (circles and triangles) separately in Hype and changed their left and upper origin so that they coincide with each "frame" of the graph.
I still have to fix some placements, but the result already looks good to me